Javascript NoUIslider-按需更新范围

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

比如,；滑块_1和滑块_2的范围均为1-10。 当我将滑块_1从位置1移动到2时，滑块_2的范围从1-10更改为1-20。 如果我将滑块_1从位置2移动到3，滑块_3现在的范围为1-30，依此类推

我初始化滑块，如下所示：

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

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

---

关于如何实现这一点有什么想法吗？

noUiSlider提供了一个

updateOptions

方法，该方法将保留所有设置，除了您传递的任何新设置。这个

从noUiSlider 8开始，您可以执行以下操作：

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

披露：我是插件作者。

您可以通过将对象作为参数传递来使用更新选项函数。您可以通过编程方式构建自己的“配置对象”，如下所示：

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

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

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

---

您需要调用

destroy（）

，然后调用

create（）

来动态更改范围。渲染控件后，无法更改范围

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

---

就这样。谢谢你的帮助！我不确定我怎么会在文档中遗漏了这一点。伟大的插件顺便说一句。嗨，我如何在vue.js版本的插件中实现这一点，我一直在尝试绑定范围，但没有受到影响@LG102这适用于更新步骤或启动。例如：如果您有一个范围为数百万的滑块，并且希望提供一个使用输入更改滑块的alt方法。您可以随时使用新的开始值销毁和重新创建滑块。