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

# Events

noUiSlider offers several ways to listen to interaction: `'update'`, `'change'`, `'set'`, `'slide'` and `'drag'`. These events can all be used at the same time. There are also the `'start'` and `'end'` events, that fire when a drag is started or ended.

Events always fire in the following order:

`'start'` > `'slide'` > `'drag'` > `'update'` > `'change'` > `'set'` > `'end'`

Update
Slide
Drag
Set
Change
Start
End

| Start | Slide | Drag | Update | Change | Set | End
--- | --- | --- | --- | --- | --- | --- | ---
A handle is activated, starting dragging | Yes | No | No | No | No | No | No
A handle is released after dragging | No | No | No | No | Yes | Yes | Yes
A handle moves while dragging | No | Yes | No | Yes | No | No | No
A connect moves while dragging | No | Yes | Yes | Yes | No | No | No
The `.set()` method is called | No | No | No | Yes | No | Yes | No
When bound using the `.on()` method | No | No | No | Yes | No | No | No
A slider is moved by tapping it | No | Yes | No | Yes | Yes | Yes | No
A handle is moved by arrow keys | No | Yes | No | Yes | Yes | Yes | No

§

## Binding

noUiSlider uses a custom binding model with support for namespaces. There are two methods, `.on(eventName, callback)` and `.off(eventName)`. Events can be namespaced by appending a period ('.') and an identifier to the event name.

Nested namespaces (`'slide.something.else'`) are not supported, and are threated as a single namespace (so `'.a.b'` isn't related to `'.a'`).

`values` is an array containing the current slider values, with formatting applied. `handle` is the index of the handle that caused the event, starting at zero. `values[handle]` gives the value for the handle that triggered the event.

`unencoded` contains the slider values without any formatting.

For all events, `this` is set to the current slider's API, containing (among others) the `.get()` and `.set()` methods. The slider api is also available as the sixth argument to all events.

    function doSomething(values, handle, unencoded, tap, positions, noUiSlider) {
        // values: Current slider values (array);
        // handle: Handle that caused the event (number);
        // unencoded: Slider values without formatting (array);
        // tap: Event was caused by the user tapping the slider (boolean);
        // positions: Left offset of the handles (array);
        // noUiSlider: slider public Api (noUiSlider);
    }

    // Binding signature
    slider.noUiSlider.on(eventName, doSomething);

    // Binding namespaced events
    slider.noUiSlider.on('set.one', function () { });
    slider.noUiSlider.on('change.one', function () { });

    // Remove all events in the 'one' namespace.
    slider.noUiSlider.off('.one');

    // Remove all events
    slider.noUiSlider.off();

    // Remove all 'change' events in any namespace.
    slider.noUiSlider.off('change');

§

## Update

Use this event when synchronizing the slider value to another element, such as an `<input>`. It fires every time the slider values are changed, either by a user or by calling API methods. Additionally, it fires immediately when bound. In most cases, this event should be more convenient than the `'slide'` event.

§

## Slide

This event is useful to specifically listen to a handle being dragged, while ignoring other updates to the slider value. This event also fires on a change by a 'tap'. In most cases, the `'update'` is the better choice.

§

## Drag

Use this event to listen for when a connect element between handles is being dragged, while ignoring other updates to the slider values.

The handle in the callback is the first handle connected to the dragged connect.

§

## Set

Whenever a slider is changed to a new value, this event is fired. This function will trigger every time a slider stops changing, including after calls to the `.set()` method. This event can be considered as the 'end of slide'.

§

## Change

This event is similar to the `'change'` events on regular `<input>` elements. It fires when a user stops sliding, when a slider value is changed by 'tap', or on keyboard interaction.

§

## Start

This event fires when a handle is clicked (`mousedown`, or the equivalent touch events).

§

## End

This event is the opposite of the `'start'` event. If fires when a handle is released (`mouseup` etc), or when a slide is canceled due to other reasons (such as mouse cursor leaving the browser window).