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?

Lg102 · Accepted Answer · 2018-04-11T16:58:37.780

36

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.

edited Apr 11 '18 at 16:58

answered Sep 10 '14 at 19:32

Lg102

4,733
3
38
61

That's it. Thanks for your help! I'm not sure how I missed that in the documentation. Great plugin btw. – DGDD Sep 10 '14 at 19:39
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. @Lg102 – Juan David Nov 27 '19 at 01:30
Is there anyway you can just set the min though? If not I have to go recalculate my max. – J_sdev Mar 16 '22 at 17:55
1

@J_sdev You can't update just the `min`, but you can get the current `max` in `slider.noUiSlider.options.range.max`. – Lg102 Mar 17 '22 at 07:54

score 3 · Answer 2 · answered Apr 24 '17 at 20:34

3

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

answered Apr 24 '17 at 20:34

SliverNinja - MSFT

31,051
11
110
173

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. – Chain Apr 04 '19 at 20:10

score 2 · Answer 3 · answered Nov 26 '15 at 15:29

2

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

answered Nov 26 '15 at 15:29

Esteban Cacavelos

753
10
22

$(".slider").updateOptions throws Uncaught TypeError: Cannot read property 'updateOptions' of undefined.. this works document.getElementById("price-slider").noUiSlider.updateOptions(config) – Jack0fshad0ws Jun 27 '21 at 00:24

NoUIslider - Update range on demand

3 Answers3