noUiSlider Slider range and handles Reading & Setting values Options Tapping, dragging & fixed ranges Examples Events Scale/Pips More... Download noUiSlider

Events

noUiSlider offers several ways to listen to interaction: 'update', 'change', 'set' and 'slide'. You can use these events all 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 order 'start' > 'slide' > 'update' > 'change' > 'set' > 'end'.

Update
Slide
Set
Change
Start
End
  Update Slide Set Change Start End
A handle is activated, starting dragging No No No No Yes Yes
A handle is released after dragging no No Yes Yes No Yes
A slider is moved by tapping it Yes Yes Yes Yes No No
A handle moves while dragging Yes Yes No No No No
The .set() method is called Yes No Yes No No No
When bound using the .on() method Yes No No No No No
Temporary set a class
function addClassFor ( element, className, duration ) {
	element.classList.add(className);
	setTimeout(function(){
		element.classList.remove(className);
	}, duration);
}
Setting up the slider
var slider = document.getElementById('slider-events');
var setter = document.getElementById('setter');
var inputLog = document.getElementById('input-log');

noUiSlider.create(slider, {
	start: [ 0, 10 ],
	range: {
		'min': [ 0 ],
		'max': [ 20 ]
	}
});
Bind button and input
setter.addEventListener('click', function(){
	slider.noUiSlider.set([5, 15]);
});

slider.noUiSlider.on('update', function ( values, handle ) {
	if ( handle == 0 ) {
		inputLog.value = values[handle];
	}
});

inputLog.addEventListener('change', function ( ) {
	slider.noUiSlider.set([this.value, null]);
});
var lUpdate = document.getElementById('l-update'),
	lSlide = document.getElementById('l-slide'),
	lSet = document.getElementById('l-set'),
	lChange = document.getElementById('l-change'),
	lStart = document.getElementById('l-start'),
	lEnd = document.getElementById('l-end');

slider.noUiSlider.on('update', function(){
	addClassFor(lUpdate, 'tShow', 450);
});

slider.noUiSlider.on('slide', function(){
	addClassFor(lSlide, 'tShow', 450);
});

slider.noUiSlider.on('set', function(){
	addClassFor(lSet, 'tShow', 450);
});

slider.noUiSlider.on('change', function(){
	addClassFor(lChange, 'tShow', 450);
});

slider.noUiSlider.on('start', function(){
	addClassFor(lStart, 'tShow', 450);
});

slider.noUiSlider.on('end', function(){
	addClassFor(lEnd, 'tShow', 450);
});
§

Binding

noUiSlider uses a custom binding model with support for namespaces. The event system looks similar to jQuery's. 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').

Event callbacks receive three arguments. values is always an array, for both one-handle and two-handle sliders. It contains the current slider values, with formatting applied. handle is 0 or 1 and indicates the handle that caused the event. values[handle] gives the value for the current handle. Should you need it, unencodedValues contains the slider values without any formatting.

For all events, this is set to the current slider's public API, containing (among others) the 'get' and 'set' methods.

Quick note: When any of the events fire, the slider state has updated. However, it's visual might not have been updated yet. This happens asynchronically to increase paint performance.

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

// 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 synchronising 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 when you specifically want to listen to a handle being dragged, but want to ignore 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.

§

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. You can consider this 'end of slide'.

§

Change

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

§

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 cancelled due to other reasons (such as mouse cursor leaving the browser window).