3

## 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

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New