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'
| 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 |
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.
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.
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.
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.
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'.
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.
This event fires when a handle is clicked (mousedown, or the equivalent touch events).
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).