Slider Values

Handles

The number of handles can be set using the startoption.

Snapping between steps

When a non-linear slider has been configured, the snapoption can be set to trueto 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 connectoption must be set to true.

Fixed dragging

Keeps the distance between handles fixed when the 'drag'flag is set.

Combined options

Most 'behavior'flags can be combined.

Hover

With this option set, the slider fires hoverevents when a mouse or pen user hovers over the slider.

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, valuesas additional options for mode, steppedto round pip values to the slider stepping, densityto pre-scale the number of pips, and filterto manually modify pip size.

The rangemode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified.

Steps

Like range, the stepsmode uses the slider range. In stepsmode, a pip is generated for every step. The filteroption can be used to filter the generated pips. The filterfunction must return 0(no value), 1(large value) or 2(small value).

Filtered Steps

Slider Colors - Handles

Default / Primary Color Slider

Success Color Slider

Info Color Slider

Warning Color Slider

Danger Color Slider

Slider With date

Start Date:
End Date:

Slider With Input

Colored Connects

Default Handle

Extra Large Size

Large Size

Default

Small Size

Extra Small

Circle Filled Handle

Extra Large Size

Large Size

Default

Small Size

Extra Small

Square Handle

Extra Large Size

Large Size

Default

Small Size

Extra Small

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.

Default Vertical Slider

Connect to lower

Connect to upper

Tooltips

Direction Top To Bottom

Limit