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

Range sliders provide a visual indication of a selected interval within a defined range by moving two handles along a horizontal track to set both a minimum and maximum value.

## Example

```html
<w-slider label="Range" min="0" max="100">
  <w-slider-thumb
    slot="from"
    aria-label="From value"
    name="from"
  ></w-slider-thumb>
  <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
</w-slider>
```

## Overview

Range sliders are best suited for quickly selecting an interval within a designated range. They offer an intuitive way to adjust settings like volume, price filters, or relative distances.

Sliders are available in two variants:

* [Single slider](/components/slider/overview.md)
* Range slider

## Anatomy

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

1. **Label (optional)**: Describes what type of data the slider controls or adjusts.
2. **Handles**: Two movable elements used to select a minimum and maximum value within the range.
3. **Filled/active track**: Visualises the selected portion between the two handles.
4. **Tooltip**: Displays the current value while dragging a handle, providing immediate feedback.
5. **Track**: Represents the full possible range of selectable values.
6. **Minimum range label (optional)**: Indicates the lowest selectable value and defines the start of the range.
7. **Maximum range label (optional)**: Indicates the highest selectable value and defines the end of the range.
8. **Minimum value input/text field (optional)**: Displays the current minimum value selected by the left handle and allows manual entry.
9. **Maximum value input/text field (optional)**: Displays the current maximum value selected by the right handle and allows manual entry.
10. **Text field suffix (optional)**: Provides contextual clarification for values when their meaning is ambiguous, such as currency or measurement units.