Multiple jQuery noUiSlider values affecting eachother

Question

I am trying to make a loan calculation using 3 jQuery noUiSliders.

The parameters are:

Amount to borrow
Duration / Amount of months to pay back
Interest rate

While changing the sliders I would like to display the values of:

Monthly amount + Interest rate (amount to loan / amount of months = result + (result * interest rate))

Total loan amount + total Interest rate. (Total loan amount + (total loan amount * interest rate))

Currently I only have the sliders but I have not managed to connect them together to calculate and display these values. Very thankful for your help.

Here's the Fiddle http://jsfiddle.net/w5wxw9se/4/

Javascript

  $('#slider-amount').noUiSlider({
   start: [ 5000 ],
   step: 5000,
   range: {
       'min': [  5000 ],
       'max': [ 400000 ]
   },
  });




 $('#slider-duration').noUiSlider({
   start: [ 1 ],
   step: 1,
   range: {
       'min': [  1 ],
       'max': [ 12 ]
   }
  });

  $('#slider-rate').noUiSlider({
     start: [ 1.6 ],
     step: 0.05,
     range: {
       'min': [  1 ],
       'max': [ 23 ]
     }
   });






 $('#slider-amount').Link('lower').to($('#slider-amount-value'));
 $('#slider-duration').Link('lower').to($('#slider-duration-value'));
 $('#slider-rate').Link('lower').to($('#slider-rate-value'));

HTML:

<div id="slider-container" style="width:400px;">

         <div id="slider-amount"></div>
         <span class="example-val" id="slider-amount-value"></span><br />

         <br />

         <div id="slider-duration"></div>
         <span class="example-val" id="slider-duration-value"></span><br />

         <br />

         <div id="slider-rate"></div>
         <span class="example-val" id="slider-rate-value"></span><br />


        <br /><br />

    <p>To pay monthly (interest rate included): <span id="to-pay-monthly"></span></p>
    <span style="font-size:11px;">amount to loan / amount of months = result + (result * interest rate)      </span>
    <br />
    <p>Total amount to pay all months  (interest rate included): <span id="pay_all_months"></span></p>
    <span style="font-size:11px;">Total loan amount + (total loan amount * interest rate)</span>

</div>

Answer 1

Each slider also takes a callback like this

$('el').noUiSlider(...).Link('lower').to(...., handler);

The handler would receive three parameters

function sliderHandler(value, handle, slider){}

Using the above you can do something like this

var total = 0,
  total2 = 0,
  amount = 0,
  duration = 0,
  roi = 0,
  topayMnthlyContainer = $("#to-pay-monthly"),
  payAllMonths = $("#pay_all_months");
$('#slider-amount').noUiSlider({
  start: [5000],
  step: 5000,
  range: {
    'min': [5000],
    'max': [400000]
  },
}).Link('lower').to($('#slider-amount-value'), amountHandler);
$('#slider-duration').noUiSlider({
  start: [1],
  step: 1,
  range: {
    'min': [1],
    'max': [12]
  }
}).Link('lower').to($('#slider-duration-value'), durationHandler);
$('#slider-rate').noUiSlider({
  start: [1.6],
  step: 0.05,
  range: {
    'min': [1],
    'max': [23]
  }
}).Link('lower').to($('#slider-rate-value'), roiHandler);

function amountHandler(value, handle, slider) {
  amount = +value;
  calculateTotal();
}

function durationHandler(value, handle, slider) {
  duration = +value;
  calculateTotal();
}

function roiHandler(value, handle, slider) {
  roi = +value;
  calculateTotal();
}

function calculateTotal() {
  // total = amount + duration
  total = amount / duration * (1 + (roi * .01));
  total2 = amount + (duration * roi * .01);
  topayMnthlyContainer.text(total);
  payAllMonths.text(total2);
}

Here is a demo http://jsfiddle.net/dhirajbodicherla/w5wxw9se/9/