Question

嘿，我已经检查过关于重置noUiSlider的话题，但我找不到处理我的方法。有什么建议吗？

<div class="row">
<div class="small-6 columns">
<button type="reset" class="w2-button w2-button-black button-reset">reset</button>
</div>  
<div class="small-6 columns">
<button type="submit" class="w2-button w2-button-black">Update</button>
</div>
</div>

noUiSlider.create($('#productspage-price-slider')[0], {
            start: [productsModel.priceFrom, productsModel.priceTo],
            connect: true,
            range: {
                min: productsModel.minPrice,
                max: productsModel.maxPrice
            },
            format: {
                from: function (value) {
                    return Math.round(value);
                },
                to: function (value) {
                    return Math.round(value);
                }
            },
            tooltips: true
        });

Answer 1

好吧，首先将滑块实例保存到变量中，如下所示：

var slider = noUiSlider.create($('#productspage-price-slider')[0], {

然后为重置按钮创建一个事件处理程序，并set初始值

$("button[type=reset]").on("click", function(){
    slider.set([productsModel.priceFrom, productsModel.priceTo]);
});

请参阅此处的工作示例：FIDDLE

无法重置noUiSlider

1 个答案: