NoUIslider - 更新範圍按需

我有兩個滑塊，我想根據另一個的移動更新一個滑塊的範圍。NoUIslider - 更新範圍按需

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

我能拿出實施這一迄今爲止最好的辦法是解構整個滑塊，並用新的範圍內，每次重新初始化。但是我不確定如何正確解構滑塊。

任何想法應該如何做到這一點？

來源

2014-09-10 DGDD

noUiSlider提供了一個update功能，該功能將保留所有設置，除了您通過它的任何新設置。

運行下面的代碼上的現有滑塊，例如：

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

會改變的範圍內。注意第二個參數是如何設置爲true;它將允許重建滑塊。更多信息請見documentation on rebuilding。

編輯：

在非jQuery的版本8，你可以這樣做：

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

披露：我的插件作者。

來源

2014-09-10 19:32:06 Lg102

就是這樣。謝謝你的幫助！我不確定我在文檔中是如何錯過的。偉大的插件順便說一句。 – DGDD 2014-09-10 19:39:55

從版本8開始，這不起作用 - 你必須銷燬並重建。 – thebenedict 2015-07-06 22:22:14

你可以通過一個對象作爲參數使用updateOptions功能。在JavaScript中的任何地方

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

，然後更新滑塊：喲，可以建立自己的「配置對象」編程這樣

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

來源

2015-11-26 15:29:12

你需要調用destroy()然後create()動態的改變範圍。控件渲染後無法改變範圍。

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

來源

2017-04-24 20:34:50 SliverNinja

NoUIslider - 更新範圍按需

回答

相關問題