JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<h2>Amount to borrow: $<span id="curr-amount">12500</span>.00</h2>
<div id="amount"></div>

<h2>Pay back over: <span id="curr-period">5</span> months</h2>
<div id="period"></div>

<h2>Result</h2>
Your monthly payment will be $<span id="monthly">204.86</span>

CSS

h2 { margin: 30px 0 10px 0; }

JavaScript

function update() {
    var amount = $('#amount').slider('value');
    var period = $('#period').slider('value');
    var monthly = (amount + amount * 0.03 * period) / (period * 12);
    $("#monthly").text(monthly.toFixed(2));
    $("#curr-amount").text(amount);
    $("#curr-period").text(period);

}

$("#amount").slider({
    value: 12500,
    min: 12500,
    max: 100000,
    step: 50,
    slide: function() {
        update();
    }
});

$("#period").slider({
    value: 5,
    min: 5,
    max: 25,
    step: 1,
    slide: function() {
        update();
    }
});