javascript NoUIslider - 按需更新范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25772170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NoUIslider - Update range on demand
提问by DGDD
I have two sliders and I would like to update the range of one slider based on the movement of the other.
我有两个滑块，我想根据另一个滑块的移动更新一个滑块的范围。
For instance; slider_1 and slider_2 both have a range of 1-10. When I move slider_1 from position 1 to 2, slider_2's range changes from 1-10 to 1-20. If I move slider_1 from position 2 to 3, slider_3 now has a range from 1-30, and so on.
例如; 滑块_1 和滑块_2 的范围均为 1-10。当我将滑块_1 从位置 1 移动到 2 时，滑块_2 的范围从 1-10 变为 1-20。如果我将 slider_1 从位置 2 移动到 3，slider_3 现在的范围是 1-30，依此类推。
I initialize the slider like so:
我像这样初始化滑块：
function slider() {
$(".slider").noUiSlider({
orientation: "horizontal",
start: [0],
range: {
min: 0,
max: 10,
},
connect: 'lower',
direction: "ltr",
step: 1,
});
};
The best way I can come up with implementing this so far is deconstruct the whole slider, and re-initialize it with the new range each time. However I am unsure of how to properly deconstruct the slider.
到目前为止，我能想出的最佳方法是解构整个滑块，并每次使用新范围重新初始化它。但是我不确定如何正确解构滑块。
Any ideas on how this should be done?
关于如何做到这一点的任何想法？
回答by Lg102
noUiSlider offers an updateOptionsmethod, which will keep all settings, save for any new ones you pass it. The documentation on updating is here.
noUiSlider 提供了一种updateOptions方法，该方法将保留所有设置，并为您传递的任何新设置保存。有关更新的文档在此处。
Starting from noUiSlider 8, you can do:
从 noUiSlider 8 开始，您可以执行以下操作：
slider.noUiSlider.updateOptions({
range: {
'min': 20,
'max': 30
}
});
Disclosure: I'm the plugin author.
披露：我是插件作者。
回答by Esteban Cacavelos
You can use updateOptionsfunctionby passing an object as a argument. Yo could build your own "configuration object" programatically like this:
您可以通过将对象作为参数传递来使用updateOptions函数。你可以像这样以编程方式构建自己的“配置对象”：
config = {
orientation: "horizontal",
start: [100,200],
range: {
min: 0,
max: 200,
},
connect: 'lower',
direction: "ltr",
step: 10,
};
and then UPDATE the slider anywhere in your Javascript:
然后在 Javascript 中的任何位置更新滑块：
$(".slider").updateOptions(config);
回答by SliverNinja - MSFT
You need to call destroy()and then create()to dynamically change the range. There is no way to alter the range after the control has been rendered.
您需要调用destroy()然后create()动态更改范围。控件呈现后无法更改范围。
slider.noUiSlider.destroy()
slider.noUiSlider.create({
range: {
'min': 20,
'max': 30
}
});
