不能重置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

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

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

然后为重置按钮创建一个事件处理程序，并将inital值设置

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

参见这里的一个工作示例：小提琴