---
url: /docs/components/slider/overview.md
---
# Slider - Overview

Sliders allow users to adjust a single value within a defined range by moving a handle along a horizontal track.

## Example

```html
<form id="audio">
  <w-slider label="Volume" min="0" max="100">
    <w-slider-thumb name="volume"></w-slider-thumb>
  </w-slider>
</form>
```

## Overview

Sliders are best suited for quickly setting a value within a designated range. They offer an intuitive way to adjust settings like volume, price filters, or relative distances.

Sliders are available in two different variants:

* Single (documented here)
* [Range slider](/components/range-slider/overview.md)

## Anatomy

::: image-block
![Example of a Slider](/components/slider/overview-anatomy.svg)
:::

1. **Label (optional)**: Describes what the slider controls or adjusts.
2. **Filled/active track**: Visualises the selected portion of the slider range up to the selected value.
3. **Tooltip**: Displays the current value while dragging the handle, providing immediate feedback.
4. **Track**: Represents the full range of available selectable values.
5. **Handle**: Movable indicator used to select a value along the track.
6. **Minimum range label (optional)**: Indicates the lowest selectable value and visually defines the start of the range.
7. **Maximum range label (optional)**: Indicates the highest selectable value and visually defines the end of the range.
8. **Value input/text field (optional)**: Displays the current selected value by the handle and allows manual entry.
9. **Input suffix (optional)**: Provides contextual clarification for values when their meaning is ambiguous, such as currency or measurement units.