A
A
Andrej Kopp2018-03-28 22:25:44
Slider
Andrej Kopp, 2018-03-28 22:25:44

How to complete a jQuery calculator with a slider?

Hello. Can anyone help with a jQuery calculator along with a slider. The calculator should read installment payments. Stuck at the moment of displaying values ​​in

<input type="text" class="form-control" id="monthprice"  value="0" />
so that instead of 0 the value is substituted when you move the slider. It counts through everything, and the input remains with a zero value. There is also a problem with entering the Initial payment$('#monathprice').val($result.toFixed(2));console.log()
<input type="text" class="form-control" id="deposit" value="0" />
how to make the formula $depositprice = ($price - $deposit) + $percentage;and in value be considered when entering the amount
<input type="text" class="form-control" id="monthprice"  value="0" />
sum was displayed dynamically. Now $depositprice = ($price - $deposit) + $percentage;it displays 0 for some reason, even if you insert any number into the "Down payment" form.
Example on HTML codepen

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

First experience with a calculator. I hope for your help.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question