> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/ui-building-blocks/widgets/input-interaction-widgets/slider.md).

# Slider

The **Slider** allows users to select a **single value** within a defined range (e.g., 0–100).\
It has a track and one draggable thumb that users can slide horizontally (or vertically) to adjust the value.

Sliders are ideal for quick, touch-friendly value selection without typing.

{% embed url="<https://youtu.be/kZPDJ-qql9o?si=pqB1L0fQNeC5jhF2>" %}

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

#### Adding a Slider Widget

The 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/SxDACx1Px0yYc8v7THAc" alt="A hero image showing a slider widget with a draggable thumb for single value selection."><figcaption><p>The Slider widget provides intuitive single-value selection with smooth thumb controls.</p></figcaption></figure>

### Core Concepts

**Single-Thumb Control**

Unlike the Range Slider, the Slider has **one thumb**:

* **Thumb** → represents the current value on the track.

The user drags this thumb to increase or decrease the value.

**Value Range**

Internally, the Slider works with:

* **Minimum bound** (`min`)
* **Maximum bound** (`max`)
* **Current value** between them (`value`)

You can think of it as a controlled numeric input represented visually.

**Visual Feedback**

* The **active segment** of the track (from `min` to current value) is usually highlighted.
* The **inactive segment** (from current value to `max`) is shown in a lighter or muted color.
* The thumb clearly shows the current value position at a glance.

**Interactive Control / Settings**

Sliders often drive **live updates**:

* Adjusting a slider can update previews (e.g., font size, zoom level)
* Live filtering of results (e.g., only show items under X price/value)
* Smooth UX for quickly trying out different values without typing.

### Properties

| Property        | Description                                                                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `min`           | The minimum value allowed by the slider.                                                                                                         |
| `max`           | The maximum value allowed by the slider.                                                                                                         |
| `division`      | The number of discrete divisions/steps on the slider. If set, the value snaps to these.                                                          |
| `value`         | The current value of the slider thumb.                                                                                                           |
| `activeColor`   | The color of the track from `min` to the current value (filled/selected portion).                                                                |
| `inactiveColor` | The color of the track from the current value to `max` (unselected portion).                                                                     |
| `thumbColor`    | The color of the draggable thumb.                                                                                                                |
| `thumbRadius`   | The radius/size of the thumb, controlling how big it appears.                                                                                    |
| `trackHeight`   | The height/thickness of the slider track.                                                                                                        |
| `onChanged`     | An action/callback triggered whenever the user drags the thumb and the value changes. Receives an object with the current `value` of the slider. |

### Default Properties

The Slider widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases

Use the Slider when you want the user to pick **one value**, for example:

* **Volume / brightness / opacity** controls
* **Progress or intensity** settings (e.g., difficulty level, animation speed)
* **Single-value filters** (e.g., “within 5 km”, “up to ₹1000”)
* **Percentage inputs** (0–100%) like completion, transparency, rating weight
* Any setting where a **continuous or stepped value** is meaningful and doesn’t require precise text input.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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