Getting and setting 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. Use .get(true) to get the slider values without formatting applied (as a number or array[number, number, ...]).

If a slider is configured to use one handle, its current value can be changed using the .set() method.

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

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

noUiSlider will always limit values to the slider range.

§

setHandle

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.

§

exactInput

Both the set and setHandle methods have an exactInput argument, which can be used to ignore the stepping configured for the slider.

§

reset

To return to the initial slider values, the .reset() method can be used. 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),
// fire the set event (default true),
// Don't ignore stepping on the slider (default false)
slider.noUiSlider.setHandle(2, 12, true, true);

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

// Set both slider handles on a slider with two handles,
// fire the set event (default true)
// Ignore stepping on the slider (default false)
slider.noUiSlider.set([13.2, 15.7], true, true);

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

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

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

To get the current positions for the slider handles (in percentages from the left of the slider), the getPositions method can be used. This matches the positions parameter in the slider's events.

slider.noUiSlider.getPositions();

See the documentation on number formatting.