# 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="/files/oru3TjBHcqwslTpEeEx8" 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](/ui-building-blocks/widgets/default-properties.md).

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/input-interaction-widgets/range-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.