NoUIslider - Update range on demand

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 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.

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?

Answer 1

noUiSlider offers an updateOptions method, which will keep all settings, save for any new ones you pass it. The documentation on updating is here.

Starting from noUiSlider 8, you can do:

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

Disclosure: I'm the plugin author.

Answer 2

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.

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