Create
In order to create a slider, call .noUiSlider({[noUiOptionsObject]}) on a div. The example below shows how to create a slider which when changed outputs its values to a span. The created slider can be changed in increments of 20.
$(".noUiSlider").noUiSlider({
range: [20, 100]
,start: [40, 80]
,step: 20
,slide: function(){
var values = $(this).val();
$("span").text(
values[0] +
" - " +
values[1]
);
}
});
40 - 80
Read
Since noUiSlider 3 has a completely redefined set of methodes, reading the sliders values doesn't look like its predecessors at all. In fact, it is way more simple.
$(".slider").val(); // thats all!
Depending on the number of handles on the slider, this value can be an number or an array[number, number]. To set the number of decimals on your result, use the serialization option.
Write
Setting the slider value has also received the simplification treatment.
$(".slider").val(number);
$(".slider").val(array[number]);
$(".slider").val(array[null, number]);
$(".slider").val(array[number, number]);
If you have set the slider to use one handle, simply set it on the slider using the .val() method. If you have two handles, pass an array. You can also pass an array for one-handled slider, if you want. Set an array position to null if you want to leave it unchanged.
Clicking the above button sets the slider, which uses range:[0, 100], to 20. It does so using:
$(".slider").val(20);
State
A slider can be in two states: disabled or enabled. Setting this state is as simple as this:
$(".slider").noUiSlider("disabled", true); // disable
$(".slider").noUiSlider("disabled", false); // enable
A disabled slider can't be changed by the user, but you can still change its value using the .val() method. Use css to show the disabled state to the user.
Options
noUiSlider can be configured with a wide variety of options, which can be use to customize the slider in to doing exacly what you want. The table below shows the parameter types expected by each option, while a more detailed description of each options' purpose is available beneath it.
Use options like this:
$(".slider").noUiSlider({
option: value
,option: value
,option: value
});
| Option | Arguments |
|---|---|
| range | array[number, number] |
| start | number, array[number, number] |
| handles |
number1,
number2
|
| connect |
string"lower",
string"upper",
booleantrue,
booleanfalse
|
| orientation |
string"vertical",
string"horizontal"
|
| margin | number |
| serialization | {[noUiSerializationObject]} |
| slide | function |
| step | number |
Range
The range option defines the values represented by the edges of the slider. Use an array to set this option.
range: [40,100]
Start
Use the start option to set the start position for the handle(s). If you use one handle, you can either pass an integer or an array. Pass an array when using two handles.
start: [60,80]
start: 70
Handles
With the handles option you can set the slider to use on or two handles.
handles: 2
Connect
Use the connect setting to define the middle bar that connects handles to eachother or to the edges of the slider. Set it to false to turn of the connecting bar. Use "lower" to connect to the lower side (left or top), or "upper" to connect to the upper side (right or bottom). Setting true sets the bar between the handles.
connect: "lower"
connect: false
Orientation
The orientation setting can be used to set the slider to "vertical" or "horizontal".
orientation: "vertical"
orientation: "horizontal"
Margin
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'.
margin: 2
Serialization
The serialization setting is the newest feature in noUiSlider. Set a noUiSerializationObject as an argument. This object is documented below.
serialization: {[noUiSerializationObject]}
Slide
Every change made to the slider can trigger a 'slide' event. This event occurs when the slider is changed by sliding a handle or clicking the bar. Pass a reference to a function, or declare a function.
var onSlide = function(){ ... };
slide: onSlide
slide: function(){ ... }
function onSlide(){ ... }
slide: onSlide
Step
By default, the slider slides fluently. In order to make the handles jump by intervals, you can use the 'step' value. The step value is relative to the values provided to 'range'.
step: 15
Serialization
Serialization is the newest and most powerfull feature of noUiSlider. The serialization object allows configuration of how a slider is used in a form. It takes two values, which are defined in the table below.
| Option | Arguments |
|---|---|
| to | $Object, "string", |
| resolution | number1, number0.1, number0.01, etc. |
The to field defines the location to write the slider values to. If you use two handles, pass an array. If not, you can optionaly pass a single value. Use strings to set the names for new, hidden, input fields, or pass a jQuery objects to put the values in. You can also choose not to serialize a handle by passing a boolean false. The resolution option allows settings of the values decimal significance. For further understanding of the serialization options, take a look at the example below. You can use any mix of objects, names and booleans.
serialization: {
/* Write the slider values to
two newly created input
fields with the names
"priceFrom" and "priceTo". */
to: ["priceFrom", "priceTo"]
/* Round to 2 decimals. */
,resolution: 0.01
}
serialization: {
/* Put the first value into an
existing input, create a new
field named "upper" for the
second. */
to: [$("#field"),"upper"]
/* Strip all decimals. */
,resolution: 1
}
/* Don't put values anywhere */
to: [false, false]
The following example shows the power of the serialization object. The upper value is displayed in the visible inbox, while on form change the entire form is stringified using the .serialize() jQuery method.
$(".slider").noUiSlider({
range: [20,60],
,start: [30,50],
,serialization: {
to: ["val1", $("input")]
,resolution: 1
}
});
$("form").change(function(){
alert($(this).serialize());
});
Styling
Since the upgrade of noUiSlider to version 3, it is based far more on css, while using less html objects. This should make styling far simpler. There are two themes available for noUiSlider 3: 'fox' and 'space'. Fox is the most useful standard layout, while space shows some additional ideas. On this page, you can switch between them by clicking their names in the floating navigation.
| Selector | Effect |
|---|---|
| .noUiSlider | The slider bar. The classname isn't important, use anything you want. |
| .connect | The bar that connect handles to eachother or the sliders edges. |
| .lower, .upper | The specific connection edge of .connect. |
| .horizontal, .vertical | The slider orientation. |
| .noUiSlider a | The handle location. |
| .noUiSlider div | The viewable handle. |
For clues to the styling of noUiSlider 3, please refer to the default themes.
Examples
Some handy snippets to help you get started.
Vertical slider
$(".slider").noUiSlider({
range: [0, 100]
,start: 50
,handles: 1
,orientation: "vertical"
});
Connect to bottom
$(".slider").noUiSlider({
range: [0, 100]
,start: 50
,handles: 1
,connect: "lower"
});
Bind to fields
$(".slider").noUiSlider({
range: [0, 100]
,start: [50, 70]
,handles: 2
,serialization: {
to: [$("#exTO"),$("#exFR")]
}
});
Disabled slider
$(".slider").noUiSlider({
range: [0, 100]
,start: 50
,handles: 1
}).noUiSlider("disabled",true);
Toggle
$(".slider").noUiSlider({
range: [0, 1]
,start: 0
,step: 1
,handles: 1
});
Images
$(".slider").noUiSlider({
range: [0, 6]
,start: 0
,step: 1
,handles: 1
,slide: function(){
$("#images>div").animate({
"left":$(this).val()*-80});
}
});