使用updateOptions更新noUiSlider后，reset()未重置至新start值的问题

我之前也碰到过一模一样的问题！其实这是 noUiSlider 的设计逻辑导致的：reset() 方法默认只会把滑块恢复到第一次调用 create() 时设置的初始 start 值，并不会自动同步你通过 updateOptions 更新后的新起始值。因为滑块内部会单独存储创建阶段的基准起始值，updateOptions 只是修改了当前滑块的显示范围和位置，并没有更新这个内部的重置基准。

解决办法有两种，都很简单： #

方法一：直接读取最新配置并设置

在重置按钮的点击事件里，直接从滑块的当前配置中取出最新的 start 值，用 set() 方法手动设置：

$(".reset").click(function() {
    // 获取滑块当前配置里的起始值
    const latestStart = slider.noUiSlider.options.start;
    slider.noUiSlider.set(latestStart);
});

方法二：手动维护起始值变量

在外层作用域定义一个变量专门存当前的起始值，每次调用 updateOptions 时同步更新这个变量，重置时直接用它来设置滑块：

// 在外层定义变量，记录当前的起始值
let currentSliderStart = [min_total_price, max_total_price];

var slider = document.getElementById('price-slider');
if (slider.noUiSlider == undefined) {
    noUiSlider.create(slider, {
        start: currentSliderStart,
        connect: true,
        range: {
            'min': min_total_price,
            'max': max_total_price
        },
        step: 1,
        format: {
            to: function (value) {
                return Math.floor(value);
            },
            from: function (value) {
                return Math.floor(value);
            }
        }
    });
} else {
    // 更新变量和滑块配置
    currentSliderStart = [min_total_price, max_total_price];
    slider.noUiSlider.updateOptions({
        start: currentSliderStart,
        range: {
            'min': min_total_price,
            'max': max_total_price
        }
    });
}

$(".reset").click(function() {
    slider.noUiSlider.set(currentSliderStart);
});

补充说明 #

去翻 noUiSlider 的官方文档的话，会明确看到 reset() 的作用是「恢复滑块到原始起始值」，所以这种行为是符合设计预期的。如果需要重置到动态更新后的起始点，手动调用 set() 就是最直接的解决方案啦。

内容的提问来源于stack exchange，提问作者Michael