#### Horizontal slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible

#### Vertical slider

The orientation setting can be used to set the slider to `"vertical"` or `"horizontal"`

#### Values range

noUiSlider will keep your values within the slider range, which saves you a bunch of validation.

Value:

#### Slider handles

Value:

Value:

#### Connected Handles

The connect setting can be used to control the bar between the handles, or the edges of the slider

Value:

Value:

#### Connected Handles Variation

Value:

Value:

#### Slider with tooltip

noUiSlider can provide a basic tooltip without using its events system. Set the tooltips option to `true` to enable.

#### Color Variations

Tooltip slider with different color options, use class `slider-*` to quickly create a styled slider. Uses native boostrap colors scheme classes

#### Ion Range silders

Start without params

Set min value, max value and start point

Set type to double and specify range, also showing grid and adding prefix "$"

Connecting from and two values

Disable visual details

Disable part of visual details

Using prefixes

Using postfixes

#### Advanced sliders

Grid will set up automatically, just set grid to true:

Want more? Use grid_num:

Have predifined step? You can snap grid to it:

Even if you have a very strange step!

Lock handle

Limit movement

Advanced limit example

Disable slider