Range Slider

Sliders are an input that allows users to make an imprecise selection from a given range (minimum and maximum values).

Interactive demo

Example

Slider can be used with/without tooltips (shown above the slider and input boxes (below the slider)

noUiSlider - JavaScript Range Slider plugin is used to create the slider. JDS package includes the necessary JS and CSS files

When to use

• When the range is more important than precision. For instance, it could be more important for a target price selector to communicate where the target price falls within a certain range than the precise dollar amount selected.

• When a relative value is more important than an exact value. For instance, a volume slider is typically more focused on the relative loudness of the output rather than the specific decibel level.

• Consider an alternative, if a user needs to enter a precise number, may be a regular text input