Как доделать калькулятор на jQuery со слайдером?

Question

[Andrej Kopp]

Всем привет. Может кто-нибудь помочь с калькулятором на jQuery вместе со слайдером. Калькулятор должен считать Платежи рассрочки. Застопорился на моменте вывода значений в

<input type="text" class="form-control" id="monthprice"  value="0" />

, чтобы вместо 0 подставлялось значение $('#monathprice').val($result.toFixed(2));когда двигаешь ползунок. Через console.log() всё считает, а input остаётся с нулевым значением.

Также есть проблема с вводом Первоначального взноса

<input type="text" class="form-control" id="deposit" value="0" />

как сделать, чтобы при вводе суммы считалась формула $depositprice = ($price - $deposit) + $percentage;и в value

<input type="text" class="form-control" id="monthprice"  value="0" />

выводилась динамично сумма. Сейчас $depositprice = ($price - $deposit) + $percentage; выводит почему то 0, даже если вставить в форму "Первоначальный взнос" любое число.

Пример на codepen

HTML

<div class="container">
      <h1>Расчёт</h1>
    	<div class="row">
    		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
    			<div class="slider"></div>
    		</div>
    		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
    			<div class="form-group">
    				<input type="number" class="form-control" disabled id="month"  value="3" />
    			</div>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
    			<div class="form-group">
            <label for="percentage">Ежемесячный платёж:</label>
    				<input type="text" class="form-control" id="monthprice"  value="0" />
    			</div>
    		</div>
    		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
    			<div class="form-group">
            <label for="deposit">Первоначальный взнос</label>
    				<input type="text" class="form-control" id="	
    deposit" value="0" />
    			</div>
    		</div>
    	</div>
    </div>

jQuery

$( document ).ready(function() {
      function update() {  
          $price = 3000;
          $month = $("#month").val();
          $deposit = $("#deposit").val();
        if ($month == 3) {
          $percentage = $price/100*6;
        }
        if ($month == 4) {
          $percentage = $price/100*7.5;
        }
        if ($month == 5) {
          $percentage = $price/100*8.5;
        }
        if ($month == 6) {
          $percentage = $price/100*10;
        }
        if ($month == 7) {
          $percentage = $price/100*12;
        }
        if ($month == 8) {
          $percentage = $price/100*13;
        }
        if ($month == 9) {
          $percentage = $price/100*14;
        }
        if ($month == 10) {
          $percentage = $price/100*15;
        }
        if ($month == 11) {
          $percentage = $price/100*17;
        }
        if ($month == 12) {
          $percentage = $price/100*18;
        }
        if ($month == 18) {
          $percentage = $price/100*25;
        }
        if ($month == 20) {
          $percentage = $price/100*27.5;
        }
        if ($month == 24) {
          $percentage = $price/100*31.5;
        }
          $depositprice = ($price - $deposit) + $percentage;
          $result = ($price + $percentage) / $month;
          
          if ($deposit == NaN) {
              $('#monathprice').val($depositprice.toFixed(2));       console.log($depositprice.toFixed(2));
          }
          else {
             $('#monathprice').val($result.toFixed(2));
              console.log($result.toFixed(2));
          }
      }
    
    
    $(function() {
    		var valMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 18, 20, 24];
    
    		$(".slider").slider({
    			min: 3,
    			max: valMap.length - 1,
    			value: this.value,
    			range: false,
    			slide: function(event, ui) {                        
    				$("#month").val(valMap[ui.value]);
            update();
    			}       
    		})
    })
    
    $('#month').on('change', function(){
      if(+$(this).val() > 24) {
        $(this).val(24);
      }
      if(+$(this).val() < 3) {
        $(this).val(3);
      }
    });
    
    $('#month').on('click', function(){
       $( ".slider" ).slider( "value", this.value );
    }).trigger('keyup');
      
    update()
    });

Первый опыт с калькулятором. Надеюсь на вашу помощь.