javascript - 影响彼此的多个jQuery noUiSlider值

我正在尝试使用3个jQuery nouislider进行贷款计算。
参数如下：
借款金额
偿还期限/月数
利率
在更改滑块时，我希望显示以下值：
月金额+利率
（贷款金额/月数=结果+（结果*利率）
贷款总额+利率总额。
（贷款总额+（贷款总额*利率）
目前我只有滑块，但我还没有设法将它们连接在一起，以计算和显示这些值。非常感谢你的帮助。
这是小提琴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>

最佳答案

每个滑块也接受这样的回调

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

处理程序将接收三个参数
函数sliderHandler（value，handle，slider）{}
用上面的方法你可以做这样的事情

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);
}

这里有一个演示http://jsfiddle.net/dhirajbodicherla/w5wxw9se/9/