# Range Slider

The **Range Slider** allows users to select a **range of values** (e.g., 100–500) between a defined **minimum and maximum**.\
It has a **track** and **two thumbs** that users can drag to adjust the start and end values.

{% embed url="<https://www.youtube.com/watch?v=zLaVt9q8Xz8>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=zLaVt9q8Xz8>

#### Adding a Range Slider Widget

The Range Slider widget is located in the **Form Elements** section of the Widget Palette. Once added, you can configure its properties from the **Widget Properties Panel**.

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-9f5b82e6453c2e6aac46d900dbf7b517417c9547%2Frange_slider.png?alt=media" alt="A hero image showing a range slider with two thumbs for selecting value ranges."><figcaption><p>The Range Slider widget enables intuitive range selection with dual thumb controls.</p></figcaption></figure>

### Core Concepts

1. **Two-Thumb Control**
   * Unlike a normal slider, the Range Slider has **two thumbs**:
     * **Start thumb** → lower value
     * **End thumb** → upper value
2. **Value Range**
   * Internally tracks:
     * **Minimum bound**
     * **Maximum bound**
     * **Current selected range** between them
3. **Visual Feedback**
   * The **selected range** is usually highlighted on the track (e.g., a filled segment between the two thumbs), helping users see the active range at a glance.
4. **Interactive Filtering / Settings**
   * Often used to **update lists, charts, or search results** as the user adjusts the range.

### Properties

| Property        | Description                                                                                                                                                                |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `min`           | The minimum value of the range.                                                                                                                                            |
| `max`           | The maximum value of the range.                                                                                                                                            |
| `division`      | The number of discrete divisions on the slider.                                                                                                                            |
| `startValue`    | The initial value of the starting thumb.                                                                                                                                   |
| `endValue`      | The initial value of the ending thumb.                                                                                                                                     |
| `activeColor`   | The color of the track between the two thumbs.                                                                                                                             |
| `inactiveColor` | The color of the track outside the selected range.                                                                                                                         |
| `thumbColor`    | The color of the draggable thumbs.                                                                                                                                         |
| `thumbRadius`   | The radius of the thumbs.                                                                                                                                                  |
| `trackHeight`   | The height of the slider track.                                                                                                                                            |
| `onChanged`     | An action to trigger when the user slides either thumb. Receives an object with `startValue` (the current start thumb value) and `endValue` (the current end thumb value). |

***

### Default Properties

The Range Slider widget supports all [default-properties](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### Use Cases

Use the **Range Slider** when you want the user to pick a **min–max range** instead of a single value, for example:

* **Price filters** in e-commerce (₹500 – ₹2000)
* **Age range** or **duration range** selection
* **Distance / radius** filters (2 km – 10 km)
* **Rating / score range** filters
* Any filter or setting where a **range** is more meaningful than a single number.