INPUTS / COMPONENTS
Range slider
Choose a minimum and maximum together.
About range slider
Sliders allow users to select a value from a continuous range by dragging a handle along a track. Sliders are commonly used for tasks like setting volume, adjusting brightness, choosing a value within a range, or selecting a point on a spectrum.
Anatomy
Shared parts, named consistently.
- 12TrackRequired
Track that the thumb moves along
- 22Label
The label of the Slider
- 32Value label
The current value or value range of the Slider
- 42Min label
A label to indicate the minimum value to select
- 52ThumbRequired
Interactive control that can be grabbed and moved along the track
- 62IndicatorRequired
Highlights the position of the active thumb along the track
- 72Max label
A label to indicate the minimum value to select
Try the default
A working example with the shared V1 visual language.
When to use
Use when both ends of a bounded range matter. Label each thumb and prevent the minimum crossing the maximum.
Tab reaches each thumb. Arrow keys adjust by step; Home and End reach the permitted limits.