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).