12

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

例如; 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,
        });
    };

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

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

4

3 回答 3

31

noUiSlider 提供了一种updateOptions方法，该方法将保留所有设置，保存您传递的任何新设置。有关更新的文档在此处。

从 noUiSlider 8 开始，您可以：

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

披露：我是插件作者。

于 2014-09-10T19:32:06.670 回答
3

您需要调用destroy()然后create()动态更改范围。呈现控件后无法更改范围。

slider.noUiSlider.destroy()
slider.noUiSlider.create({
    range: {
        'min': 20,
        'max': 30
    }
});
于 2017-04-24T20:34:50.613 回答
2

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

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

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

 $(".slider").updateOptions(config);
于 2015-11-26T15:29:12.110 回答