> For the complete documentation index, see [llms.txt](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/components/range-slider.md).

# Range Slider

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

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v2.1/components.html#range-slider-wrapper)

### Example

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5tcH1W94H2w1w4BOYwsj%2Fuploads%2FyJXR83cUWJZ45WAtFMtP%2Fimage.png?alt=media&amp;token=e1da2862-25cf-48d0-8aef-ee2b51ae8887" alt=""></div>

{% hint style="info" %}
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
{% endhint %}

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