loader

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

Settings

Theme
Theme Direction
Theme Colors
Layout Type
Container Option
Sidebar Type
Card With