### noUiSlider

#### Slider Values

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

When a non-linear slider has been configured, the `snap` option can be set to `true` to 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 `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.

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

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

#### Stepped Count

#### Values

#### Stepped Values

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

#### Filtered Steps

#### Slider Colors - Handles

Default / Primary Color Slider
Success Color Slider
Info Color Slider
Warning Color Slider
Danger Color Slider
Custom Color Slider

#### Slider Sizing

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

#### Direction Bottom To Top

#### Margin

#### Limit

#### Steps

#### Vertical Slider Colors - Handles

#### Default Handle

#### Circle Filled Handle

#### Square Handle

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now