Slider - Overview

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

See also Range slider.

AndroidreleasedElementsreleasediOSreleasedReactreleasedReact 19releasedVuereleased

Example

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Overview

A slider provides a visual indication of an adjustable value within a defined range (minimum and maximum values) by moving a handle along a horizontal track.

Sliders are available in two different variants:

• Single (documented here)
• Range slider

Anatomy

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.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system