具有不同范围的离子滑块更改值(jQuery)

时间:2018-07-06 17:49:28

标签: javascript jquery slider ion

我要更改/移动第二个滑块,然后自动更改第一个滑块的最小值并查看更改。

滑块1-最低$ 10 /滑块2-10

滑块1-最低$ 20 /滑块2-20

滑块1-最低$ 30 /滑块2-40

滑块1-最低$ 50 /滑块2-60

http://jsfiddle.net/0xLs46an/13/

var $minImp, $maxImp, $fromImp, $iniMon, $mon;


    $maxImp = 1000;
    $minImp = 10;
    $fromImp = 200;
    $iniMon = 1,
    $mon = [10, 20, 30, 50];



$(document).ready(function() {

    $("#rangemoney").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        min: $minImp,
        max: $maxImp,
        from: $fromImp,
        step: 100,
        prefix: "$",
        grid: true,
        onChange: function (data) {
            update(1,"value", data.min);
        }
    });

    $("#rangeMons").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        from: $iniMon,
        values:$mon,
        grid: true,
        onChange: function (data) {
            update(2,"value", data.from);
        }
    });

});




$(document).on("change", function updateTotal(slider,val){
$total = ($('#rangemoney').val() / $('#rangeMons').val()).toFixed(2).replace(/\./g,',');
    document.getElementById('total').innerHTML = "€ " + $total;
});

function update(slider,val) {

    if ($mon[$iniMon] > 20){
        $minImp = $mon[$iniMon] * 20;
    }else{
        $minImp = $mon[$inioMon] * 10;
    }

}

0 个答案:

没有答案