Multiple jquery-ui value sliders affecting eachother

Question

I am trying to make a loan calculation using 3 jquery-ui sliders.

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:

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

2. 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 a Fiddle http://jsfiddle.net/L65u9spv/

Javascript:

 $(function() {

    $( "#slider-toloan" ).slider({
      range: "min",
      value: 25000,
      min: 5000,
      max: 400000,
      step: 5000,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });

    $( "#amount" ).val( "$" + $( "#slider-toloan" ).slider( "value" ) );


    $( "#slider-loanduration" ).slider({
      range: "min",
      value: 5,
      min: 1,
      max: 25,
      step: 1,
      slide: function( event, ui ) {
        $( "#duration" ).val( ui.value );
      }
    });


    $( "#duration" ).val( $( "#slider-loanduration" ).slider( "value" ) );



    $( "#slider-rate" ).slider({
      range: "min",
      value: 1.85,
      min: 1.75,
      max: 23,
      step: 0.05,
      slide: function( event, ui ) {
        $( "#rate" ).val( ui.value );
      }
    });


    $( "#rate" ).val( $( "#slider-rate" ).slider( "value" ) );
  });

Html:

  <p>
              <label for="amount">Amount to Loan:</label>
              <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>

            <div id="slider-toloan"></div>


            <p>
              <label for="duration">Duration Months:</label>
              <input type="text" id="duration" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>

            <div id="slider-loanduration"></div>

            <p>
              <label for="rate">Interest Rate</label>
              <input type="text" id="rate" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>

            <div id="slider-rate"></div>


                <br /><br />
                <p>To pay monthly (interest rate included): ?</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): ?</p>
                <span style="font-size:11px;">Total loan amount + (total loan amount * interest rate)</span>

Answer 1

Ideally this would be handled through a data-binding library like Angular, but you can just do your calculations on load, and in the slide method for each slider, so something like this:

HTML Changes:

<!-- Add spans with id's so you can change the contents later -->
<p>To pay monthly (interest rate included): <span id="to-pay-monthly"></span></p>
<p>Total amount to pay all months  (interest rate included): <span id="pay_all_months"></span></p>

Javascript Changes:

$( "#slider-toloan" ).slider({
  range: "min",
  value: 25000,
  min: 5000,
  max: 400000,
  step: 5000,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );

    //here you do the calculation for both values since the total amount affects both calculations
    $( "#to-pay-monthly" ).text(ui.value / $("#slider-loanduration").slider("option","value")  * (1 + ($("#slider-rate").slider("option","value") * .01)));
    $( "#pay_all_months" ).text(ui.value + (ui.value * $("#slider-rate").slider("option","value") * .01));
  }
});

$( "#slider-loanduration" ).slider({
  range: "min",
  value: 5,
  min: 1,
  max: 25,
  step: 1,
  slide: function( event, ui ) {
    $( "#duration" ).val( ui.value );

    //here, the duration only affects one calculation, no need to recalculate the other
    $( "#to-pay-monthly" ).text( $("#slider-toloan").slider("option","value") / ui.value  * (1 + ($("#slider-rate").slider("option","value") * .01)));
  }
});

$( "#slider-rate" ).slider({
  range: "min",
  value: 1.85,
  min: 1.75,
  max: 23,
  step: 0.05,
  slide: function( event, ui ) {
    $( "#rate" ).val( ui.value );

      //this value also affects both calculations
      $( "#pay_all_months" ).text($("#slider-toloan").slider("option","value") + ($("#slider-toloan").slider("option","value") * ui.value * .01));
      $( "#to-pay-monthly" ).text($("#slider-toloan").slider("option","value") / $("#slider-loanduration").slider("option","value")  * (1 + ($("#slider-rate").slider("option","value") * .01)));
  }
});

//then do both calculations on page load 
$( "#pay_all_months" ).text($("#slider-toloan").slider("option","value") + ($("#slider-toloan").slider("option","value") * $("#slider-rate").slider("option","value") * .01));
$( "#to-pay-monthly" ).text($("#slider-toloan").slider("option","value") / $("#slider-loanduration").slider("option","value")  * (1 + ($("#slider-rate").slider("option","value") * .01)));

I forked your fiddle with my working code: http://jsfiddle.net/fnurvdt5/