No ui SLider

Slider Values

Handles

The number of handles can be set using the start option.

More than two handles

The number of handles in the start option is not limited to two. You can use the connect option between every handle

Range

Value:

The range has a minimum and maximum value. The minimum value cannot be equal to the maximum value.

Stepping and snapping to values

The amount the slider changes on movement can be set using the step option.

Non-linear sliders

Value:

noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion.

Stepping in non-linear sliders

Value:

For every subrange in a non-linear slider, stepping can be set.

Slider Behaviour

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 behaviour option. This option accepts a "-" separated list of "drag", "tap", "fixed", "snap", "unconstrained" or "none".

Tap

A handle snaps to a clicked location. A smooth transition is used. This option is default.

Fixed dragging

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

Drag

Makes the range draggable. Requires two handles. The connect option must be set to true.

Snap

A handle snaps to a clicked location. It can immediatly 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 'behaviour' flags can be combined.

scale/pips to a slider

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 (default)

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

The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used.

Count

Stepped count

Values

The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode.

Values

Stepped values

Slider Colors - Handles

Primary color slider

success color slider

info color slider

warning color slider

danger color slider

custom color slider

Slider Sizing

Default handle

extra large slider

large slider

default slider

small slider

extra small slider

CIRCLE FILLED HANDLE

extra large slider

large slider

default slider

small slider

extra small slider

square FILLED HANDLE

extra large slider

large slider

default slider

small slider

extra small slider

Vertical Sliders

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 you'll need to set one. You can use any unit you want, including % or px.

DEFAULT VERTICAL SLIDER

CONNECT TO LOWER

CONNECT TO Uper

CONNECT TO Uper with tooltip