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

# 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 enabled by adding their keyword to the `behaviour` option.

This option accepts a `"-"` separated list of `"drag"`, `"drag-all"`, `"tap"`, `"fixed"`, `"snap"`, `"unconstrained"`, `"invert-connects"` 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
- Invert connects

§

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

§

## Invert Connects

With this option set, connects invert when handles pass each other.

Requires the `unconstrained` behaviour and the `connect` option. This option is only applicable for sliders with two handles.

    var invertConnectsSlider = document.getElementById('invert-connects');

    noUiSlider.create(invertConnectsSlider, {
        start: [20*60, 8*60],
        behaviour: 'unconstrained-invert-connects',
        step: 15,
        connect: true,
        range: {
            'min': 0,
            'max': 24*60
        }
    });

Show the slider value

    var invertConnectsValues = document.getElementById('invert-connects-values');

    invertConnectsSlider.noUiSlider.on('update', function (values) {
        var minToHHMM = function(mins) {
            var pad = function(n) { return ('0'+n).slice(-2); };
            return [mins / 60 ^ 0, mins % 60].map(pad).join(':');
        };
        invertConnectsValues.innerHTML = values.map(minToHHMM).join(' - ');
    });