Slider behaviour
noUiSlider offers several ways to handle user interaction. The range can be made draggable, or handles can move to tapped positions. All these effects are optional, and can be enabled by adding their keyword to the behaviour option.
This option accepts a "-" separated list of "drag", "drag-all", "tap", "fixed", "snap", "unconstrained", "invert-connects" 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: "unconstrained-tap"Allow handles to move past each other.
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
}
});
Drag all handles
Drags all handles when the 'drag' flag is set. Requires more than two handles. The connect option must be set to true. The slide event fires for all handles when dragging the range.
var dragAllSlider = document.getElementById('drag-all');
noUiSlider.create(dragAllSlider, {
start: [40, 60, 80],
behaviour: 'drag-all',
connect: true,
range: {
'min': 20,
'max': 100
}
});
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;
});
Unconstrained
With this option set, handles are allowed to move past each other. The limit and margin options cannot be used with this behaviour.
All APIs will return slider values in the original handle order, regardless of whether handles have changed places.
var unconstrainedSlider = document.getElementById('unconstrained');
var unconstrainedValues = document.getElementById('unconstrained-values');
noUiSlider.create(unconstrainedSlider, {
start: [20, 50, 80],
behaviour: 'unconstrained-tap',
connect: true,
range: {
'min': 0,
'max': 100
}
});
unconstrainedSlider.noUiSlider.on('update', function (values) {
unconstrainedValues.innerHTML = values.join(' :: ');
});
Smooth steps
With this option set, handles will ignore step values while dragging. Steps are applied when a handle is released. The "update" event fires when a handle is released.
var smoothStepsSlider = document.getElementById('smooth-steps');
var smoothStepsValues = document.getElementById('smooth-steps-values');
noUiSlider.create(smoothStepsSlider, {
start: [0, 100],
behaviour: 'smooth-steps',
step: 15,
connect: true,
range: {
'min': 0,
'max': 100
}
});
smoothStepsSlider.noUiSlider.on('update', function (values) {
smoothStepsValues.innerHTML = values.join(' :: ');
});
Combined options
Most 'behaviour' flags can be combined. This example combines 'tap', 'drag' and 'smooth-steps'.
var dragTapSlider = document.getElementById('combined');
noUiSlider.create(dragTapSlider, {
start: [40, 60],
behaviour: 'drag-smooth-steps-tap',
step: 10,
connect: true,
range: {
'min': 20,
'max': 80
}
});
Invert Connects
With this option set, connects invert when handles pass each other.
Requires the unconstrained behaviour and the connect option. This option is only applicable for sliders with two handles.
var invertConnectsSlider = document.getElementById('invert-connects');
noUiSlider.create(invertConnectsSlider, {
start: [20*60, 8*60],
behaviour: 'unconstrained-invert-connects',
step: 15,
connect: true,
range: {
'min': 0,
'max': 24*60
}
});
var invertConnectsValues = document.getElementById('invert-connects-values');
invertConnectsSlider.noUiSlider.on('update', function (values) {
var minToHHMM = function(mins) {
var pad = function(n) { return ('0'+n).slice(-2); };
return [mins / 60 ^ 0, mins % 60].map(pad).join(':');
};
invertConnectsValues.innerHTML = values.map(minToHHMM).join(' - ');
});