#### Extra - NoUI Sliders

Statistics Invoices Schedule

###### NoUI sliders

Basic NoUI slider examples

###### Slider handles

Set handles using `start` option

Value: Value:

###### Non-linear slider

Displays non-linear slider example

Value:

###### Values range

Slider values are part of a range

Value:

###### Non-linear stepping

Displays steps in non-linear slider

Value: Value:

###### Stepping and snapping

Set slider steps with `step` option

Value:

###### Snapping between steps

Force slider to jump between values

Value: Value:

###### Slider Behaviour

Tapping, dragging, snapping etc.

###### Slider behaviour

Add behaviour to the slider

Value: Value:

###### Fixed dragging

Distance between handles is fixed

Value: Value:

###### Tap behaviour

A handle slides to a clicked location

Value:

###### Snap behaviour

A handle snaps to a clicked location

Value:

###### Drag behaviour

Makes the range dragable

Value: Value:

###### Combined options

Behaviour flags can be combined

Value: Value:

###### Pips and scales

Adding a scale/pips to a slider

###### Slider with pips

Slider pips in `range` mode

###### Count mode

Slider pips in `count` mode

###### Filtered steps

Slider with filtered pip labels

###### Values mode

Slider pips in `values` mode

###### RTL direction

Slider pips in `RTL` direction

###### Positions mode

Slider pips in `positions` mode

###### Advanced examples

More complex NoUI slider examples

###### Slider with tooltips

Add tooltips with `serialization` feature

Value: Value:

###### Connect to lower side

Connect handle to the `lower` side

Value:

###### Min handles distance

Set minimum distance between handles

Value: Value:

###### Skipping steps

Skip certain steps with `snap` option

Value: Value:

###### RTL slider direction

Change direction with `direction` option

Value:

###### Connect to upper side

Connect handle to the `upper` side

Value:

###### Vertical sliders

NoUI vertical slider orientation

###### Default vertical slider

Vertical direction slider example

###### Vertical ranges

Add ranges to vertical slider

###### Connect to lower side

Connect handle to the `lower` side

###### Top to bottom pips

Scale pips from top to bottom

###### Connect to upper side

Connect handle to the `upper` side

###### Bottom to top pips

Scale pips from bottom to top

###### Slider colors

Contextual NoUI slider alternatives

###### Default slider

Default `dark grey` slider color

###### Success slider style

Using `noui-slider-success` class

###### Primary slider style

Using `noui-slider-primary` class

###### Warning slider style

Using `noui-slider-warning` class

###### Danger slider style

Using `noui-slider-danger` class

###### Info slider style

Using `noui-slider-info` class

###### Other slider options

Optional slider settings

###### Sizes. Default handle

Using `noui-slider-lg (sm)` classes

###### Sizes. Solid handle

Using `noui-slider-solid` class

###### Sizes. White handle

Using `noui-slider-white` class