javascript - 如何重置 NoUiSlider？

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 评论的链接为我指明了正确的方向。

在noUiSlider-Reference中，它提到了重置方法，它将滑块重置为其起始值，这正是我想要的：

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

Answer 3

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

Answer 4

<sliderName>.noUiSlider.reset();

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

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