0

我希望两个 noUiSlider 的数量在我滑动时自动更新并显示在 Sum 中。

第一个滑块的值与第二个滑块的值相乘,然后再乘以 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'));
4

1 回答 1

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

在这里查看一个活生生的例子。

于 2015-01-11T09:44:29.390 回答