Slider behaviour

noUiSlider offers several ways to handle user interaction. The range can be made draggable, or handles can move to tapped positions. All these effects are optional, and can be enable by adding their keyword to the behaviour option.

This option accepts a "-" separated list of "drag", "drag-all", "tap", "fixed", "snap", "unconstrained" or "none".

var behaviourSlider = document.getElementById('behaviour');

noUiSlider.create(behaviourSlider, {
    start: [20, 40],
    step: 10,
    behaviour: 'drag',
    connect: true,
    range: {
        'min': 20,
        'max': 80
    }
});

Tap
Drag
Fixed dragging
Drag all handles
Snap
Hover
Unconstrained
Smooth steps

Example configurations

behaviour: "drag"

Make the range draggable. Handles are always draggable.

behaviour: "drag-fixed"

The range is draggable. The range width can't be changed, so dragging one handle will move the other, too.

behaviour: "tap"

Make the closest handle when the slider gets tapped.

behaviour: "tap-drag"

Make the closest handle jump when the slider bar is tapped, make the range draggable.

behaviour: "hover"

Fire hover events when a user with a mouse or pen hovers over the slider.

behaviour: "unconstrained-tap"

Allow handles to move past each other.

behaviour: "none"

Turn off all behaviour, except for standard moving.

Tap

A handle snaps to a clicked location. A smooth transition is used. This option is default.

var tapSlider = document.getElementById('tap');

noUiSlider.create(tapSlider, {
    start: 40,
    behaviour: 'tap',
    connect: [false, true],
    range: {
        'min': 20,
        'max': 80
    }
});

Drag

Makes the range (the green connecting bar between handles) draggable. Requires two handles. The connect option must be set to true. The slide event fires for both handles when dragging the range.

var dragSlider = document.getElementById('drag');

noUiSlider.create(dragSlider, {
    start: [40, 60],
    behaviour: 'drag',
    connect: true,
    range: {
        'min': 20,
        'max': 80
    }
});

Fixed dragging

Keeps the distance between handles fixed when the 'drag' flag is set.

var dragFixedSlider = document.getElementById('drag-fixed');

noUiSlider.create(dragFixedSlider, {
    start: [40, 60],
    behaviour: 'drag-fixed',
    connect: true,
    range: {
        'min': 20,
        'max': 80
    }
});

Drag all handles

Drags all handles when the 'drag' flag is set. Requires more than two handles. The connect option must be set to true. The slide event fires for all handles when dragging the range.

var dragAllSlider = document.getElementById('drag-all');

noUiSlider.create(dragAllSlider, {
    start: [40, 60, 80],
    behaviour: 'drag-all',
    connect: true,
    range: {
        'min': 20,
        'max': 100
    }
});

Snap

A handle snaps to a clicked location. It can immediatly be moved, without a mouseup + mousedown.

var snapSlider = document.getElementById('snap');

noUiSlider.create(snapSlider, {
    start: 40,
    behaviour: 'snap',
    connect: [true, false],
    range: {
        'min': 20,
        'max': 80
    }
});

Hover

With this option set, the slider fires hover events when a mouse or pen user hovers over the slider. The event is provided with the slider value at the hovered position. It does not fire while the slider is being dragged by mouse or pen, but it does for touch events.

var hoverSlider = document.getElementById('hover');
var field = document.getElementById('hover-val');

noUiSlider.create(hoverSlider, {
    start: 20,
    behaviour: 'hover-snap',
    direction: 'rtl',
    range: {
        'min': 0,
        'max': 10
    }
});

hoverSlider.noUiSlider.on('hover', function (value) {
    field.innerHTML = value;
});

Unconstrained

With this option set, handles are allowed to move past each other. The limit and margin options cannot be used with this behaviour.

All APIs will return slider values in the original handle order, regardless of whether handles have changed places.

var unconstrainedSlider = document.getElementById('unconstrained');
var unconstrainedValues = document.getElementById('unconstrained-values');

noUiSlider.create(unconstrainedSlider, {
    start: [20, 50, 80],
    behaviour: 'unconstrained-tap',
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

unconstrainedSlider.noUiSlider.on('update', function (values) {
    unconstrainedValues.innerHTML = values.join(' :: ');
});

Smooth steps

With this option set, handles will ignore step values while dragging. Steps are applied when a handle is released. The "update" event fires when a handle is released.

var smoothStepsSlider = document.getElementById('smooth-steps');
var smoothStepsValues = document.getElementById('smooth-steps-values');

noUiSlider.create(smoothStepsSlider, {
    start: [0, 100],
    behaviour: 'smooth-steps',
    step: 15,
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

smoothStepsSlider.noUiSlider.on('update', function (values) {
    smoothStepsValues.innerHTML = values.join(' :: ');
});

Combined options

Most 'behaviour' flags can be combined. This example combines 'tap', 'drag' and 'smooth-steps'.

var dragTapSlider = document.getElementById('combined');

noUiSlider.create(dragTapSlider, {
    start: [40, 60],
    behaviour: 'drag-smooth-steps-tap',
    step: 10,
    connect: true,
    range: {
        'min': 20,
        'max': 80
    }
});