Handles
The number of handles can be set using the start
option. This option accepts an array of initial handle positions. Set one value for one handle, two values for two handles.
$('#slider-handles').noUiSlider({
start: [ 4000, 8000 ],
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
Range
All values on the slider are part of a range. The range has a minimum and maximum value.
$('#slider-range').noUiSlider({
start: [ 4000 ],
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
$('#slider-range').Link('lower').to($('#slider-range-value'));
Stepping and snapping to values
The amount the slider changes on movement can be set using the step
option.
$('#slider-step').noUiSlider({
start: [ 4000 ],
step: 1000,
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
$('#slider-step').Link('lower').to($('#slider-step-value'));
Non-linear sliders
noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion. You can create sliders with ever-increasing increments by specifying the value for the slider at certain intervals. Note how the handle in the example below starts at 30% of the slider width, even though 4000
is not 30% of the span between 2000
and 10000
.
$('#slider-non-linear').noUiSlider({
start: [ 4000 ],
range: {
'min': [ 2000 ],
'30%': [ 4000 ],
'70%': [ 8000 ],
'max': [ 10000 ]
}
});
$('#slider-non-linear').Link('lower').to($("#slider-non-linear-value"));
Stepping in non-linear sliders
For every subrange in a non-linear slider, stepping can be set. Note how in the example below the slider doesn't step until it reaches 500
. From there on, it changes in increments of 500
, until it reaches 4000
, where increments now span 1000
.
$('#slider-non-linear-step').noUiSlider({
start: [ 500, 4000 ],
range: {
'min': [ 0 ],
'10%': [ 500, 500 ],
'50%': [ 4000, 1000 ],
'max': [ 10000 ]
}
});
$('#slider-non-linear-step').Link('lower').to($('#slider-non-linear-step-value'));
Snapping between steps
When a non-linear slider has been configured, the snap
option can be set to true
to force the slider to jump between the specified values.
$('#slider-snap').noUiSlider({
start: [ 0, 500 ],
snap: true,
connect: true,
range: {
'min': 0,
'10%': 50,
'20%': 100,
'30%': 150,
'40%': 500,
'50%': 800,
'max': 1000
}
});
$('#slider-snap'
http://refreshless.com/nouislider/slider-values/