noUiSlider Range and Handles Reading & Setting Values Formatting 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. Use `.get(true)` to get the slider values without formatting applied (as a `number` or `array[number, number, ...]`).

§

## Setting slider values

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

§

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

§

## Positions

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

§

## Number formatting

See the documentation on number formatting.