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

Slider behaviour

noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the behaviour option.

This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none".

var behaviourSlider = document.getElementById('behaviour');

noUiSlider.create(behaviourSlider, {
	start: [ 20, 40 ],
	step: 10,
	behaviour: 'drag',
	connect: true,
	range: {
		'min':  20,
		'max':  80
	}
});
§

Example configurations

behaviour: "drag"

Make the range draggable. Handles are always draggable.

behaviour: "drag-fixed"

The range is draggable. The range width can't be changed, so dragging one handle will move the other, too.

behaviour: "tap"

Make the closest handle when the slider gets tapped.

behaviour: "tap-drag"

Make the closest handle jump when the slider bar is tapped, make the range draggable.

behaviour: "hover"

Fire hover events when a user with a mouse or pen hovers over the slider.

behaviour: "none"

Turn off all behaviour, except for standard moving.

§

Tap

A handle snaps to a clicked location. A smooth transition is used. This option is default.

var tapSlider = document.getElementById('tap');

noUiSlider.create(tapSlider, {
	start: 40,
	behaviour: 'tap',
	connect: [false, true],
	range: {
		'min':  20,
		'max':  80
	}
});
§

Drag

Makes the range (the green connecting bar between handles) draggable. Requires two handles. The connect option must be set to true. The slide event fires for both handles when dragging the range.

var dragSlider = document.getElementById('drag');

noUiSlider.create(dragSlider, {
	start: [ 40, 60 ],
	behaviour: 'drag',
	connect: true,
	range: {
		'min':  20,
		'max':  80
	}
});
§

Fixed dragging

Keeps the distance between handles fixed when the 'drag' flag is set.

var dragFixedSlider = document.getElementById('drag-fixed');

noUiSlider.create(dragFixedSlider, {
	start: [ 40, 60 ],
	behaviour: 'drag-fixed',
	connect: true,
	range: {
		'min':  20,
		'max':  80
	}
});
§

Snap

A handle snaps to a clicked location. It can immediatly be moved, without a mouseup + mousedown.

var snapSlider = document.getElementById('snap');

noUiSlider.create(snapSlider, {
	start: 40,
	behaviour: 'snap',
	connect: [true, false],
	range: {
		'min':  20,
		'max':  80
	}
});
§

Hover

With this option set, the slider fires hover events when a mouse or pen user hovers over the slider. The event is provided with the slider value at the hovered position. It does not fire while the slider is being dragged by mouse or pen, but it does for touch events.

var hoverSlider = document.getElementById('hover');
var field = document.getElementById('hover-val');

noUiSlider.create(hoverSlider, {
	start: 20,
	behaviour: 'hover-snap',
	direction: 'rtl',
	range: {
		'min':  0,
		'max':  10
	}
});

hoverSlider.noUiSlider.on('hover', function( value ){
	field.innerHTML = value;
});
§

Combined options

Most 'behaviour' flags can be combined.

var dragTapSlider = document.getElementById('combined');

noUiSlider.create(dragTapSlider, {
	start: [ 40, 60 ],
	behaviour: 'drag-tap',
	connect: true,
	range: {
		'min':  20,
		'max':  80
	}
});