noUiSlider can be configured with a wide variety of options, which can be use to customize a slider's behaviour.
For options regarding the slider range, see slider values.
The start option sets the number of handles and corresponding start positions.
The start option uses the slider's 'format' option to decode the input. Number input will be cast to string and decoded.
The connect option can be used to control the bar between the handles or the edges of the slider.
When using one handle, set the value to either 'upper' or 'lower'.
For sliders with 2 or more handles, pass an array with a boolean for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.
Setting true sets the bars between the handles, but not between the handles and the sliders edges.
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'.
The limit option is the opposite of the margin option, limiting the maximum distance between two handles.
Padding limits how close to the slider edges handles can be.
By default, the slider slides fluently. In order to make the handles jump between intervals, the step option can be used.
Note that for non-linear sliders, step values are set as part of the range option.
The orientation setting can be used to set the slider to "vertical" or "horizontal".
Set dimensions! Vertical sliders don't assume a default height, so a height needs to be set. Any unit can be used, including % or px.
By default the sliders are top-to-bottom and left-to-right, but this can be changed using the direction option, which decides where the upper side of the slider is.
noUiSlider can provide a basic tooltip using the tooltips option. This option can also accept formatting options to format the tooltips content. In that case, pass an array with a formatter for each handle, true to use the default or false to display no tooltip.
Tooltips can be removed from a slider using the removeTooltips() method.
To merge overlapping tooltips, refer to this example.
Set the animate option to false to prevent the slider from animating to a new value with when calling .set().
The animationDuration option can be used to set the animation speed assumed by the slider library.
In addition to this, the CSS (-webkit-)transition property for the .noUi-state-tap .noUi-origin and .noUi-state-tap .noUi-connect selectors must be set.
Additional attributes can be added to the slider handles using the handleAttributes option.
Handles in the slider can receive keyboard focus and be moved by arrow keys.
Keyboard support can be disabled by setting the keyboardSupport option to false.
When moved by the arrow keys on a keyboard, handles obey the step value for the range they are in.
When moving in a range that has no step value set, handles move by 10% of the range they are in.
This default can be changed using the keyboardDefaultStep option. (view example 1)
Changing the keyboardMultiplier option will multiply the default step by the set amount.
This is useful when dealing with larger value ranges but smaller step size. (view example 2)
The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys
multiply the default step by 5. This can be changed using the keyboardPageMultiplier option. (view example 2)
Here the keyboard step size is 20 which is equal to range / keyboardDefaultStep.
Here the keyboard step size is 50 which is equal to step * keyboardMultiplier.
When moving the slider through documents, or in other advanced scenarios, the documentElement that events are bound to can be changed.
See this pull request for more information.