Question

当我滑动并显示在Sum上时，我希望两个noUiSliders的数量自动更新。

第一个滑块的值与第二个滑块的值相乘，然后再乘以110.结果将显示在量程和中。

    <h2>Antall selgere <span id="selgere"></span></h2>
    <div class="slide_selgere"></div>

    <h2>Antall pakker <span id="pakker"></span></h2>
    <div class="slide_pakker"></div>

    Sum: <span id="sum"></span>

我的脚本如下：

$(".slide_selgere").noUiSlider({
    start: [ 5 ],
    step: 1,
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': [ 1 ],
        'max': [ 10 ]
    }
});

$(".slide_selgere").Link('lower').to($('#selgere'));

$(".slide_pakker").noUiSlider({
    start: [ 15 ],
    step: 1,
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': [ 1 ],
        'max': [ 100 ]
    }

});

$(".slide_pakker").Link('lower').to($('#pakker'));

Answer 1

在两个滑块上使用另一个.Link()：

var sliders = $('.slider'), sum = $('#sum');

sliders.Link().to(function( value ){
    // Use .not() to filter the sliders, finding the one that *didn't* change.
    var total = Number(value) + Number(sliders.not($(this)).val());
    sum.html(total);
});

查看实时示例here。

计算nouisliders的总量

1 个答案: