NoUIslider - 按需更新范围

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方法,它将保留所有设置,除了您传递的任何新设置.有关更新的文档在这里.

从noUiSlider 8开始,您可以:

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

披露:我是插件作者.