范围滑块计算器移动

时间:2018-06-22 12:50:01

标签: dynamic calculator ion-range-slider

我希望滑块值的分割出现在文本div中。并且将在移动滑块时进行更新。该代码基于ion.rangeslider。

    <div id="quantify">
        <input type="text" id="rangequantify" value="" name="range" />
    </div>
    <br/><br/>
    <div id="months">
        <input type="text" id="rangemonths" value="" name="range" />
    </div>
    <br/><br/>
    <div id="totalFinan">
    </div>

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>

<script>
var $quantify, $months, $minImp, $maxImp, $fromImp, $frommonth, $month;

$quantify = 6000;
$months = 3;
$minImp = 0;
$maxImp = 5000;
$fromImp = 400;
$frommonth = 24;
$month = [6, 12, 24, 36, 48, 60];


jQuery(document).ready(function() {
    jQuery("#rangequantify").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        value:$quantify,
        min: $minImp,
        max: $maxImp,
        from: $fromImp,
        step: 100,
        prefix: "€",
        prettify_separator: ".",
        grid: true,
        grid_num: 5

    });
    jQuery("#rangemonths").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        from: $months,
        postfix: " months",
        values:$month,
        grid: true,
    });

    update();

});

  function update(slider,val) {
    var $quantify = slider == 1?val:$("#quantify").val();
    var $months = slider == 2?val:$("#months").val();

     $total = "€ " + ($quantify / $month[$months]).toFixed(2).replace(/\./g,',');
     $( "#quantify" ).val($quantify);
     $( "#totalFinan" ).val($months);
     $( "#total-label" ).text($total);
     console.log($total);   
}

0 个答案:

没有答案