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?

Mercurial

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.

Gumption

That's it. Thanks for your help! I'm not sure how I missed that in the documentation. Great plugin btw. – Mercurial

Hi, how can I achieve this in the vue.js version of the plugin, I have been trying to bind the range, but is not affected. @Gumption – Cannibal

Is there anyway you can just set the min though? If not I have to go recalculate my max. – Rockling

@Rockling You can't update just the min, but you can get the current max in slider.noUiSlider.options.range.max. – Gumption

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
    }
});

Yamashita

This works for updating the STEPS or START too. For example: if you have a slider with a range in the millions and you want to provide an alt method using inputs to change the sliders. you can destroy and re-create the slider with new START values whenever you like. – Burke

Answer 3

You can use updateOptions function by passing an object as a argument. Yo could build your own "configuration object" programatically like this:

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:

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

Loesch

$(".slider").updateOptions throws Uncaught TypeError: Cannot read property 'updateOptions' of undefined.. this works document.getElementById("price-slider").noUiSlider.updateOptions(config) – Helles