Noui-Slider
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
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.
Left to right
The range mode uses the slider range to
determine where the pips should be. A pip is generated for
every percentage specified.
Right to left
The range mode uses the slider range to
determine where the pips should be. A pip is generated for
every percentage specified.
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).
Default Handle
Circle Filled Handle
Square Handle
Default Vertical Slider
Connect to lower
Connect to upper
Tooltips
Direction Top To Bottom
Direction Bottom To Top
Margin
Limit
Steps
Default Handle
Circle Filled Handle
Square Handle
Shopping Cart
5 new-
Supreme toys cooker
Kitchenware Item
$250
-
Supreme toys cooker
Kitchenware Item
$250
-
Supreme toys cooker
Kitchenware Item
$250