NoUIslider - 按需更新范围答案

【问题标题】：NoUIslider - Update range on demandNoUIslider - 按需更新范围
【发布时间】：2014-09-10 18:06:17
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery uislider nouislider

【解决方案1】：

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

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

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

披露：我是插件作者。

【讨论】：

就是这样。谢谢你的帮助！我不确定我是如何在文档中错过的。顺便说一句，很棒的插件。
您好，请问如何在vue.js版本的插件中实现这个，我一直在尝试绑定范围，但不受影响。 @Lg102
无论如何你可以设置最小值吗？如果没有，我必须重新计算我的最大值。
@J_sdev 您不能只更新min，但您可以在slider.noUiSlider.options.range.max 中获取当前的max。

【解决方案2】：

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

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

【讨论】：

这也适用于更新 STEPS 或 START。例如：如果您有一个范围为数百万的滑块，并且您想提供一个使用输入来更改滑块的 alt 方法。您可以随时销毁并使用新的 START 值重新创建滑块。

【解决方案3】：

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

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

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

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

【讨论】：

$(".slider").updateOptions throws Uncaught TypeError: Cannot read property 'updateOptions' of undefined.. 这有效 document.getElementById("price-slider").noUiSlider.updateOptions(config)