NoUIslider - Update range on request

Question

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 have a range of 1-10. When I move slider_1 from position 1 to 2, the range of slider_2 changes from 1-10 to 1-20. If I move slider_1 from position 2 to 3, now slider_3 has a range from 1 to 30, etc.

I initialize the slider as follows:

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

The best way I can start implementing this so far is to parse the entire slider and reinitialize it with a new range every time. However, I'm not sure how to deconstruct the slider correctly.

Any ideas on how to do this?

Answer 1

noUiSlider offers the update function, which will save all the settings, save all the new ones that you pass.

Running the following code on an existing slider, for example:

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

Will change the range. Notice how the second argument is set to true ; This will allow you to rebuild the slider. For more information, see the rebuild documentation.

Edit:

In a version other than jQuery 8, you can:

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

Disclosure: I am the author of the plugin.

Answer 2

You can use the updateOptions function by passing an object as an argument. Yo could create its own "configuration object" programmatically as follows:

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

and then the UPDATE slider anywhere in your Javascript:

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

Answer 3

You need to call destroy() and then create() to dynamically change the range. It is not possible to change the range after the control has been displayed.

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