Question

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

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

我像这样初始化滑块：

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

到目前为止，我能够实现这一目标的最佳方法是解构整个滑块，并每次使用新的范围重新初始化它。但是我不确定如何正确解构滑块。

关于如何做到这一点的任何想法？

Answer 1

noUiSlider提供updateOptions方法，该方法将保留所有设置，除了您传递的任何新设置。 documentation on updating is here。

从noUiSlider 8开始，你可以这样做：

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

披露：我是插件作者。

Answer 2

您可以通过传递对象作为参数来使用 updateOptions 函数。 Yo可以像这样以编程方式构建自己的“配置对象”：

config = {
        orientation: "horizontal",
        start: [100,200],
        range: {
            min: 0,
            max: 200,
        },
        connect: 'lower',
        direction: "ltr",
        step: 10,
    };

然后在Javascript中的任何位置更新滑块：

 $(".slider").updateOptions(config);

Answer 3

您需要调用destroy()然后create()来动态更改范围。在渲染控件后无法更改范围。

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

NoUIslider - 按需更新范围

3 个答案: