NoUI Slider
Single Value

The single value can be set using the step option.

Single value (in <form>)

The single value from element can be set using the formControl option.

Range

The range mode uses the slider range to determine where the pips should be.

Tooltips

noUiSlider offers some powerful mechanisms that allow to display tooltip using [tooltips] option.

Range with config
Keyboard support
With Custom Key Handler
With custom formatting

You can configure the slider with the custom formating option as per your requirement.

Slider Colors - Handles
Default / Primary Color Slider
Success Color Slider
Info Color Slider
Warning Color Slider
Danger Color Slider
Secondary Color Slider
Vertical Sliders

The orientation setting can be used to set the slider to vertical. Vertical sliders don't assume a default height, so you'll need to set one.

Default Vertical Slider

Range

Tooltips

Vertical Slider Colors - Handles

Default Handle

Circle Filled Handle

Square Handle