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