JSFiddle - React, Tailwind, and code Playground

by Kristian Ladd

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="amount"></div><br>
<div id="years"></div><br>
amount<input type="text" id="currentamount"><br>
<span>interest rate: 3.25%</span><br>
years<span id="yearsval"></span><br>
monthly pay<span id="monthly"></span>

JavaScript

$( document ).ready(function() {  
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
        var amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
       var years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});