javascript - NoUIslider - Update range on demand -

i have 2 sliders , update range of 1 slider based on movement of other.

for instance; slider_1 , slider_2 both have range of 1-10. when move slider_1 position 1 2, slider_2's range changes 1-10 1-20. if move slider_1 position 2 3, slider_3 has range 1-30, , on.

i initialize slider so:

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

the best way can come implementing far deconstruct whole slider, , re-initialize new range each time. unsure of how deconstruct slider.

any ideas on how should done?

nouislider offers update feature, keep settings, save new ones pass it.

running following code on existing slider, example:

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

will change range. notice how second argument set true; it'll allow re-building slider. more information in documentation on rebuilding.

edit:

in non-jquery version 8, can do:

slider.nouislider.updateoptions({     range: {         'min': 20,         'max': 30     } }); 

disclosure: i'm plugin author.