# 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-225583e470ff42fd66f4dfbafd076042f7eccd1b%2Fslider.png?alt=media" 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

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