Несколько значений jQuery noUiSlider, влияющих друг на друга

Я пытаюсь рассчитать кредит, используя 3 jQuery noUiSliders.

Параметры:

Сумма займа
Срок/Количество месяцев для погашения
Процентная ставка

При изменении ползунков я хотел бы отображать значения:

Ежемесячная сумма + Процентная ставка (сумма кредита / количество месяцев = результат + (результат * процентная ставка))

Общая сумма кредита + общая процентная ставка. (Общая сумма кредита + (общая сумма кредита * процентная ставка))

В настоящее время у меня есть только ползунки, но мне не удалось соединить их вместе, чтобы вычислить и отобразить эти значения. Очень благодарен за вашу помощь.

Вот скрипт 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>

javascript html jquery nouislider
person Toothfairy    schedule 22.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Каждый ползунок также принимает обратный вызов, подобный этому

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

Обработчик получит три параметра

функция sliderHandler (значение, дескриптор, ползунок) {}

Используя вышеизложенное, вы можете сделать что-то вроде этого

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/

person Dhiraj    schedule 22.06.2015
comment
Спасибо, выглядит хорошо ... Однако значение необходимо обновлять при перемещении любого из ползунков, было бы здорово, если бы вы могли включить его в пример. - person Toothfairy; 22.06.2015
comment
Значение изменяется при перемещении ползунков. Пожалуйста, проверьте демо - person Dhiraj; 22.06.2015
comment
Привет, Дхирадж ... Хм, странно, когда я пытаюсь, значения перемещаются только при перемещении первого верхнего ползунка, а не второго и третьего. Ценю твою помощь - person Toothfairy; 22.06.2015
comment
Я пытаюсь заставить его работать следующим образом: jsfiddle.net/fnurvdt5 обратите внимание, что здесь используются разные js библиотека. - person Toothfairy; 22.06.2015
comment
@Toothfairy: что вы уже пробовали с noUISlider? - person Dhiraj; 22.06.2015
comment
Я пробовал только скрипку, которую вставил выше, и скрипку, которую вы предоставили. Если вы посмотрите на rantesankarna.se/#/start (внизу слева), это то, что я пытаюсь сделать. Спасибо за вашу помощь - person Toothfairy; 23.06.2015
comment
что-то подобное будет работать jsfiddle.net/dhirajbodicherla/w5wxw9se/9? - person Dhiraj; 23.06.2015
comment
Теперь выглядит намного лучше, спасибо, однако формулы расчета кажутся немного странными. Вы заметите разницу в формуле, если посмотрите на jsfiddle.net/fnurvdt5. - person Toothfairy; 23.06.2015
comment
Я бы посоветовал вам взглянуть на функцию calculateTotal() и не стесняться редактировать ее в соответствии с требуемой формулой. Переменные: общее количество (за месяц), сумма, продолжительность, рентабельность инвестиций и общее количество 2 (за все месяцы). - person Dhiraj; 23.06.2015