noUiSlider Slider Range and Handles Reading & Setting Values Options Tapping, Dragging & Fixed Ranges Examples Events Scale/Pips Updating, Disabling & Styling Download

Getting and setting slider values

§

Reading slider values

noUiSlider has an API with two simple methods: .get() and .set(). To get the current slider value:

slider.noUiSlider.get();

For one-handle sliders, calling .get() will return the value as a 'string'. For multi-handle sliders, an array['string', 'string', ...] will be returned.

§

Setting slider values

If you have configured the slider to use one handle, you can change the current value by passing a number to the .set() method.

For sliders with multiple handles, pass an array. One-handled sliders will also accept arrays.

Within an array, you can set any position to null to you leave a handle unchanged.

noUiSlider will always limit values to the slider range.

To set a single slider handle, the setHandle method can be used. This method accepts a zero-indexed handle number, a value and optionally a 'fire set event' boolean.

Passing null as the value to setHandle will leave the handle unchanged.

To return to the initial slider values, you can use the .reset() method. This will only reset the slider values.

var slider = document.getElementById('slider');

noUiSlider.create(slider, /* { options } */);

// Set one handled slider
slider.noUiSlider.set(10);
slider.noUiSlider.set([150]);

// Set the upper handle on a slider with two handles,
// don't change the lower one
slider.noUiSlider.set([null, 14]);

// On a slider with three handles,
// set the third to 12 (the handleNumber is 0-indexed)
// Then: fire the set event
slider.noUiSlider.setHandle(2, 12, true);

// Set both slider handles on a slider with two handles
slider.noUiSlider.set([13.2, 15.7]);

// Return to the 'start' values
// Does NOT reset any other slider properties
slider.noUiSlider.reset();
§

Example

Clicking the button below sets the slider, which uses a range from 0 to 100, to 20.

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [80],
    range: {
        'min': [0],
        'max': [100]
    }
});
Handling button presses
// Set the slider value to 20
document.getElementById('write-button').addEventListener('click', function () {
    slider.noUiSlider.set(20);
});

// Read the slider value.
document.getElementById('read-button').addEventListener('click', function () {
    alert(slider.noUiSlider.get());
});
§

Number formatting

To format the slider output, noUiSlider offers a format option. Simply specify to and from functions to encode and decode the values. See manual formatting to the right for usage information.

By default, noUiSlider will format output with 2 decimals.

Manual formatting can be error-prone, so noUiSlider has support for the wNumb formatting library. wNumb offers a wide range of options and provides number validation.

Formatting can also be used for the aria-valuenow accessibility attribute using the ariaFormat option.

Note that if the .to() method returns a Number, noUiSlider's .get() will also return Numbers. See this issue for more details.

Formatting with wNumb
var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
    start: [20000],
    step: 1000,
    range: {
        'min': [20000],
        'max': [80000]
    },
    ariaFormat: wNumb({
        decimals: 3
    }),
    format: wNumb({
        decimals: 3,
        thousand: '.',
        suffix: ' (US $)'
    })
});
Manual formatting
var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
    start: [20],
    step: 10,
    range: {
        'min': [20],
        'max': [80]
    },
    format: {
        to: function (value) {
            return value + ',-';
        },
        from: function (value) {
            return value.replace(',-', '');
        }
    }
});
Linking the input field
var inputFormat = document.getElementById('input-format');

sliderFormat.noUiSlider.on('update', function (values, handle) {
    inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function () {
    sliderFormat.noUiSlider.set(this.value);
});