#### 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 / Primary Color Slider
Success Color Slider
Info Color Slider
Warning Color Slider
Danger Color Slider
Custom Color Slider

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

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

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow

##### Quick Page Links

- Analytics /dashboards/dashboard1
- eCommerce /dashboards/dashboard2
- CRM /dashboards/dashboard3
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop