Slider Values
Handles
The number of handles can be set using the start option.
Stepping in non-linear sliders
For every subrange in a non-linear slider, stepping can be set.
Stepping and snapping to values
The amount the slider changes on movement can be set using
the step option.
Non-linear sliders
noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion.
Range
All values on the slider are part of a range. The range has a minimum and maximum 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 behavior
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 behavior
option. This option accepts a "-" separated list of
"drag", "tap", "fixed", "snap" or "none".
Tap
A handle snaps to a clicked location. A smooth transition is
used. This option is default.
Drag
Makes the range draggable. Requires two handles. The connect option must be set to true.
Fixed dragging
Keeps the distance between handles fixed when the 'drag' flag is set.
Snap
A handle snaps to a clicked location. It can immediately be
moved, without a mouseup + mousedown.
Hover
With this option set, the slider fires hover events
when a mouse or pen user hovers over the slider.
Combined options
Most 'behavior' flags can be combined.
Slider Scales / Pips
This feature allows you to generate points along the slider. Five options
can be set: mode to determine where to place pips, values as additional options for mode, stepped to round pip values to the slider stepping, density to pre-scale the number of pips, and filter to manually
modify pip size.
Range
The range mode uses the slider range to determine
where the pips should be. A pip is generated for every percentage
specified.
Left to right
Right to left
Positions
In positions mode, pips are generated at percentage-based
positions on the slider. Optionally, the stepped option can be set to true to match the pips to
the slider steps.
Positions
Stepped Positions
Count
Count
Stepped Count
Values
Values
Stepped Values
Steps
Like range, the steps mode uses the
slider range. In steps mode, a pip is generated
for every step. The filter option can be used
to filter the generated pips. The filter function
must return 0 (no value), 1 (large
value) or 2 (small value).
Filtered Steps
Slider Colors - Handles
Slider Sizing
Default Handle
Circle Filled Handle
Square Handle
Vertical Sliders
The orientation setting can be used to set the slider to "vertical"
Set dimensions! Vertical sliders don't assume a default
height, so you'll need to set one. You can use any unit
you want, including % or px.