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

# Options

noUiSlider can be configured with a wide variety of options, which can be used to customize slider functionality.

For options regarding the slider range, see slider values.

For options regarding the sliders behaviour, see slider behaviour.

For a complete overview of all slider options, method and properties, see reference.

- Start
- Connect
- Margin
- Limit
- Padding
- Step
- Orientation
- Direction
- Tooltips
- Animate
- Handle Attributes
- Keyboard Support
- Document Element (advanced)

§

## Start

The start option sets the number of handles and corresponding start positions.

The start option uses the slider's `'format'` option to decode the input. Number input will be cast to string and decoded.

Default
none
Accepted values
`'string'`,
`array['string']`,
`array['string', 'string', ...]`

    var startSlider = document.getElementById('slider-start');

    noUiSlider.create(startSlider, {
        start: [20, 80],
        range: {
            'min': [0],
            'max': [100]
        }
    });

§

## Connect

The connect option can be used to control the bar between the handles or the edges of the slider.

When using one handle, set the value to either `'upper'` or `'lower'`.

For sliders with 2 or more handles, pass an `array` with a `boolean` for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.

Setting `true` sets the bars between the handles, but not between the handles and the sliders edges.

Default
`false`
Accepted values
`'lower'`,
`'upper'`,
`true`,
`false`,
`array[...]`

    var connectSlider = document.getElementById('slider-connect');

    noUiSlider.create(connectSlider, {
        start: 40,
        connect: 'lower',
        range: {
            'min': 0,
            'max': 100
        }
    });

    var connectSlider2 = document.getElementById('slider-connect2');

    noUiSlider.create(connectSlider2, {
        start: [20, 40, 60],
        connect: [true, false, true, true],
        range: {
            'min': 0,
            'max': 80
        }
    });

§

## Margin

When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'.

Default
none
Accepted values
`number`

    var marginSlider = document.getElementById('slider-margin');

    noUiSlider.create(marginSlider, {
        start: [20, 80],
        margin: 30,
        range: {
            'min': 0,
            'max': 100
        }
    });

Show the slider value

    var marginMin = document.getElementById('slider-margin-value-min'),
        marginMax = document.getElementById('slider-margin-value-max');

    marginSlider.noUiSlider.on('update', function (values, handle) {
        if (handle) {
            marginMax.innerHTML = values[handle];
        } else {
            marginMin.innerHTML = values[handle];
        }
    });

§

## Limit

The limit option is the opposite of the margin option, limiting the maximum distance between two handles.

Default
none
Accepted values
`number`

    var limitSlider = document.getElementById('slider-limit');

    noUiSlider.create(limitSlider, {
        start: [10, 120],
        limit: 40,
        behaviour: 'drag',
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });

Show the slider value

    var limitFieldMin = document.getElementById('slider-limit-value-min');
    var limitFieldMax = document.getElementById('slider-limit-value-max');

    limitSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? limitFieldMax : limitFieldMin).innerHTML = values[handle];
    });

§

## Padding

Padding limits how close to the slider edges handles can be.

Default
0
Accepted values
`number`,
`array[number]`,
`array[number, number]`

    var paddingSlider = document.getElementById('slider-padding');

    noUiSlider.create(paddingSlider, {
        start: [20, 80],
        padding: [10, 15], // Or just 10
        range: {
            'min': 0,
            'max': 100
        }
    });

Show the slider value

    var paddingMin = document.getElementById('slider-padding-value-min');
    var paddingMax = document.getElementById('slider-padding-value-max');

    paddingSlider.noUiSlider.on('update', function (values, handle) {
        if (handle) {
            paddingMax.innerHTML = values[handle];
        } else {
            paddingMin.innerHTML = values[handle];
        }
    });

§

## Step

By default, the slider slides fluently. In order to make the handles jump between intervals, the step option can be used.

Note that for non-linear sliders, `step` values are set as part of the `range` option.

Default
none
Accepted values
`number`

    var stepSlider = document.getElementById('slider-step');

    noUiSlider.create(stepSlider, {
        start: [20, 80],
        step: 10,
        range: {
            'min': 0,
            'max': 100
        }
    });

§

## Orientation

The orientation setting can be used to set the slider to `"vertical"` or `"horizontal"`.

Set dimensions! Vertical sliders don't assume a default `height`, so a height needs to be set. Any unit can be used, including `px`, `em` or `rem`.
Default
`"horizontal"`
Accepted values
`"vertical"`, `"horizontal"`

    var verticalSlider = document.getElementById('slider-vertical');

    noUiSlider.create(verticalSlider, {
        start: 40,
        orientation: 'vertical',
        range: {
            'min': 0,
            'max': 100
        }
    });

§

## Direction

By default the sliders are top-to-bottom and left-to-right, but this can be changed using the direction option, which decides where the upper side of the slider is.

Default
`"ltr"`
Accepted values
`"ltr"`, `"rtl"`

    var directionSlider = document.getElementById('slider-direction');

    noUiSlider.create(directionSlider, {
        start: 20,
        direction: 'rtl',
        range: {
            'min': 0,
            'max': 100
        }
    });

Show the slider value

    var directionField = document.getElementById('field');

    directionSlider.noUiSlider.on('update', function (values, handle) {
        directionField.innerHTML = values[handle];
    });

§

## Tooltips

noUiSlider can provide a basic tooltip using the `tooltips` option. This option can also accept formatting options to format the tooltips content. In that case, pass an `array` with a formatter for each handle, `true` to use the default or `false` to display no tooltip.

To merge overlapping tooltips, refer to this example.

§

### removeTooltips

Tooltips can be removed from a slider using the `removeTooltips()` method.

Default
`false`
Accepted values
`false`, `true`, `formatter`, `array[formatter or true or false, ...]`

    var tooltipSlider = document.getElementById('slider-tooltips');

    noUiSlider.create(tooltipSlider, {
        start: [20, 80, 120],
        tooltips: [false, wNumb({decimals: 1}), true],
        range: {
            'min': 0,
            'max': 200
        }
    });

    // Remove tooltips:
    // tooltipSlider.noUiSlider.removeTooltips();

§

## Animate

Set the animate option to `false` to prevent the slider from animating to a new value with when calling `.set()`.

Default
`true`
Accepted values
`true`, `false`

### Animation Duration

The `animationDuration` option can be used to set the animation speed assumed by the slider library.

In addition to this, the CSS `(-webkit-)transition` property for the `.noUi-state-tap .noUi-origin` and `.noUi-state-tap .noUi-connect` selectors must be set.

Default
`300`
Accepted values
`number`

    var unAnimatedSlider = document.getElementById('slider-animate-false');
    var setButton = document.getElementById('set-sliders');

    noUiSlider.create(unAnimatedSlider, {
        animate: false,
        start: 20,
        range: {
            min: 0,
            max: 100
        }
    });

    setButton.addEventListener('click', function () {
        animatedSlider.noUiSlider.set(60);
        unAnimatedSlider.noUiSlider.set(60);
    });

Changing animation duration

    var animatedSlider = document.getElementById('slider-slow');

    noUiSlider.create(animatedSlider, {
        animate: true,
        animationDuration: 1600,
        start: 20,
        range: {
            min: 0,
            max: 100
        }
    });

    #slider-slow.noUi-state-tap .noUi-connect,
    #slider-slow.noUi-state-tap .noUi-origin {
        -webkit-transition: transform 1600ms;
        transition: transform 1600ms;
    }

§

## Handle Attributes

Additional attributes can be added to the slider handles using the `handleAttributes` option.

Default
[none]
Accepted values
array of `{ key: value }` for each handle

    noUiSlider.create(slider, {
        start: [10, 120],
        handleAttributes: [
            { 'aria-label': 'lower' },
            { 'aria-label': 'upper' },
        ],
        range: {
            'min': 0,
            'max': 100
        }
    });

§

## Keyboard Support

Handles in the slider can receive keyboard focus and be moved by arrow keys.

Keyboard support can be disabled by setting the `keyboardSupport` option to `false`.

When moved by the arrow keys on a keyboard, handles obey the `step` value for the range they are in. When moving in a range that has no `step` value set, handles move by 10% of the range they are in. This default can be changed using the `keyboardDefaultStep` option. (view example 1)

Changing the `keyboardMultiplier` option will multiply the default step by the set amount. This is useful when dealing with larger value ranges but smaller step size. (view example 2)

The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys multiply the default step by 5. This can be changed using the `keyboardPageMultiplier` option. (view example 2)

###
Example 1

Here the keyboard step size is `20` which is equal to `range / keyboardDefaultStep`.

### Example 2

Here the keyboard step size is `50` which is equal to `step * keyboardMultiplier`.

keyboardSupport Default
`true`
Accepted values
`true`, `false`

    /**
     * Example 1
     */
    var keyboardSupport = document.getElementById('slider-keyboard')

    noUiSlider.create(keyboardSupport, {
        start: 10,
        keyboardSupport: true,      // Default true
        keyboardDefaultStep: 5,     // Default 10
        keyboardPageMultiplier: 10, // Default 5
        range: {
            'min': 0,
            'max': 100
        }
    });

    /**
     * Example 2
     */
    var keyboardSupport2 = document.getElementById('slider-keyboard-2')

    noUiSlider.create(keyboardSupport2, {
        start: 100,
        step: 1,
        keyboardSupport: true,      // Default true
        keyboardDefaultStep: 5,     // Default 10
        keyboardPageMultiplier: 100,// Default 5
        keyboardMultiplier: 50,     // Default 1
        range: {
            'min': 0,
            'max': 1000
        }
    });

Show the slider value

    var keyboardSupportValue = document.getElementById('slider-keyboard-value');
    keyboardSupport.noUiSlider.on('update', function (values, handle) {
        keyboardSupportValue.innerHTML = values[handle];
    });

    var keyboardSupport2Value = document.getElementById('slider-keyboard-2-value');
    keyboardSupport2.noUiSlider.on('update', function (values, handle) {
        keyboardSupport2Value.innerHTML = values[handle];
    });

§

## Document Element

When moving the slider through documents, or in other advanced scenarios, the `documentElement` that events are bound to can be changed.

See this pull request for more information.

Default
The document the slider is in
Accepted values
Any other document element

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

    noUiSlider.create(slider, {
        start: [10, 90],
        documentElement: documentElement,
        range: {
            'min': 0,
            'max': 100
        }
    });