javascript - NoUIslider - 按需更新范围

Question

我有两个 slider ，我想根据另一个 slider 的移动更新一个 slider 的范围。

例如； slider_1 和 slider_2 的范围都是 1-10。当我将 slider_1 从位置 1 移动到位置 2 时，slider_2 的范围从 1-10 变为 1-20。如果我将 slider_1 从位置 2 移动到位置 3，则 slider_3 现在的范围为 1-30，依此类推。

我像这样初始化 slider :

  function slider() {
        $(".slider").noUiSlider({
            orientation: "horizontal",
            start: [0],
            range: {
                min: 0,
                max: 10,
            },
            connect: 'lower',
            direction: "ltr",
            step: 1,
        });
    };

到目前为止，我能想出的最好的实现方法是解构整个 slider ，并每次都用新的范围重新初始化它。但是我不确定如何正确解构 slider 。

关于如何做到这一点有什么想法吗？

Answer 1

noUiSlider 提供了一个 updateOptions 方法，它将保留所有设置，保存您传递给它的任何新设置。 documentation on updating is here .

从 noUiSlider 8 开始，您可以:

slider.noUiSlider.updateOptions({
    range: {
        'min': 20,
        'max': 30
    }
});

披露:我是插件作者。