javascript - 无法重置 noUiSlider

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

首先将 slider 实例保存到变量中，如下所示:

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

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

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

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