# Range Slider

### [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&#x26;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