#### Components - Sliders

Statistics Invoices Schedule

###### Basic sliders Basic jQuery UI sliders

###### Basic slider example

Example of basic jQuery UI slider

###### Values range slider

Use `range: true` to show ranges

###### Custom start value

Set start value using `value` option

###### Fixed minimum range

Set min value with `range: 'min'` option

###### Snap to increments

Increment values with the `step` option

###### Fixed maximum range

Set max value with `range: 'max'` option

###### Advanced sliders Advanced jQuery UI sliders

###### Slider with pips

Using `.slider("pips")` method

###### Display handle tooltip

Using `.slider("float")` method

###### Display months

Custom output: You selected

###### Display labels with pips

Using `rest: 'label'` option

###### Hide rest of the points

Hide pips using `rest: false` option

###### Label localization

Display non-roman numbers/letters

###### Display pips only

Add `'pips'` to the first/last points

###### Display prefix and suffix

Using `prefix` and `suffix` options

###### Display pips and float

Using both `pips` and `float` methods

###### Vertical sliders Vertical slider orientation

###### Basic vertical sliders

Using `orientation: 'vertical'` option

70 52 80 34

###### Vertical slider with pips

Using `.slider("pips")` method

2 5 8

###### Range with fixed minimum

Set min value with `range: 'min'` option

70 52 80 34

###### Vertical slider with labels

Using `rest: 'label'` option

1 2 3

###### Range with fixed maximum

Set max value with `range: 'max'` option

70 52 80 34

###### With handle tooltips

Using both `float` and `pips` methods

2 5 8

###### Slider colors jQuery UI contextual slider colors

###### Default slider

Default `dark grey` slider color

###### Success slider style

Using `ui-slider-success` class

###### Primary slider style

Using `ui-slider-primary` class

###### Warning slider style

Using `ui-slider-warning` class

###### Danger slider style

Using `ui-slider-danger` class

###### Info slider style

Using `ui-slider-info` class

###### Other slider options Options of jQuery UI sliders

###### Sizes. Default handle

Using `ui-slider-lg (sm, xs)` classes

###### Sizes. Solid handle

Using `ui-slider-solid` class

###### Sizes. White handle

Using `ui-handle-white` class

###### NoUI sliders Basic NoUI slider examples

###### Slider handles

Set handles using `start` option

###### Non-linear slider

Displays non-linear slider example

Value:

###### Values range

Slider values are part of a range

###### Non-linear stepping

Displays steps in non-linear slider

Value:

###### Stepping and snapping

Set slider steps with `step` option

###### Snapping between steps

Force slider to jump between values

Value: Value:

###### Slider Behaviour Tapping, dragging, snapping etc.

###### Slider behaviour

Add behaviour to the slider

###### Fixed dragging

Distance between handles is fixed

###### Tap behaviour

A handle slides to a clicked location

###### Snap behaviour

A handle snaps to a clicked location

###### Drag behaviour

Makes the range dragable

###### Combined options

Behaviour flags can be combined

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

###### Connect to lower side

Connect handle to the `lower` side

###### Connect to upper side

Connect handle to the `upper` side

###### 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 Additional NoUI slider options

###### Sizes. Default handle

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

###### Sizes. Solid handle

Using `noui-slider-solid` class

###### Sizes. White handle

Using `noui-slider-white` class