noUiSlider Slider Range and Handles Reading & Setting Values 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 use to customize a slider's behaviour.

For options regarding the slider range, see slider values.

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

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.

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
true,
false,
array[...]
var connectSlider = document.getElementById('slider-connect');

noUiSlider.create(connectSlider, {
    start: 40,
    connect: [true, false],
    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'. This option is only available on linear sliders.

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 oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders.

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, you can use the step 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 you'll need to set one. You can use any unit you want, including % or px.

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 you can change this 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.

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

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

The animationDuration option can be used to set the animation speed assumed by the slider library. In addition to this, you must manually alter the CSS (-webkit-)transition property for the .noUi-state-tap .noUi-origin selector.

Default
300
Accepted values
number
var trueSlider = document.getElementById('slider-animate-true');
var falseSlider = document.getElementById('slider-animate-false');
var setButton = document.getElementById('set-sliders');

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

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

setButton.addEventListener('click', function () {
    trueSlider.noUiSlider.set(60);
    falseSlider.noUiSlider.set(60);
});
§

Keyboard Support

Handles in the slider can receive keyboard focus by default. This can be turned off.

Example: Adding keyboard support

Example: Using the .steps() API to determine the next step value

Default
true
Accepted values
true, false
var keyboardSlider = document.getElementById('slider-keyboard');

noUiSlider.create(keyboardSlider, {
    start: [10, 90],
    keyboardSupport: false,
    range: {
        'min': 0,
        'max': 100
    }
});
§

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