Question

如何使用javascript重置特定形式的所有滑块？（jquery也可以接受）http://refreshless.com/nouislider/

Answer 1

// Set one .noUiSlider.setue
slider.noUiSlider.set(10);
slider.noUiSlider.set([150]);

// Set the upper handle,
// don't change the lower one.
slider.noUiSlider.set([null, 14]);

// Set both slider handles
slider.noUiSlider.set([13.2, 15.7]);

Answer 2

有点晚了，但是Praveen's comment的链接向我指出了正确的方向。

在noUiSlider-Reference内提到重置方法，该重置方法将滑块重置为其初始值，而这正是我要查找的值：

    // Return to the 'start' values
    // Does NOT reset any other slider properties
    slider.noUiSlider.reset()

Answer 3

<sliderName>.noUiSlider.reset();

如果你有多个滑块，请按以下方式实现循环：

var sliderName = ["A","B","C"];
for(var i=0; i<sliderName.length; i++){
  sliderName[i].noUiSlider.reset();
}

Answer 4

使用NoUISlider v7.0遇到了同样的问题（我知道有一个更新的问题），这就是我的解决方法：

给出以下标记：

<div class="container">
    <label>Price</label>
    <div class="slider" data-min="100" data-max="900000" data-step="1000"></div>
    <input type="hidden" class="input-filter-min" value="100" />
    <input type="hidden" class="input-filter-max" value="900000" />
    <span class="filter-min"></span> - <span class="filter-max"></span> €
</div>

以及以下初始化：

$('.slider').each(function() {
     $(this).noUiSlider({
            connect: true,
            behaviour: 'tap',
            start: [100,900000],
            step: 1000,
            range: {
                'min': 100,
                'max': 900000
            }
        });
});

销毁并重新初始化（单击您的某个位置或操作后）：

$('.slider').each(function() {
        $(this)[0].destroy();
        $(this).parent().find('span[class^="filter"]').text('');

        var min = parseInt($(this).attr('data-min')), max = parseInt($(this).attr('data-max'));

        $(this).parent().find('.input-filter-min').val(min);
        $(this).parent().find('.input-filter-max').val(max);
    });    

    setNoUiSliders(); // which is a function that do the basic initialization in the previous example

如何重置NoUiSlider？

4 个答案: