Slider
Description
A single-value slider allows users to select one value by dragging a handle along a track. It is most effective for continuous inputs where approximate selection is acceptable, and typing an exact number is unnecessary.
Use Cases
- Adjusting a setting along a continuum (e.g., volume, brightness).
- Choosing a threshold value (e.g., minimum donation amount).
- Selecting a single time or position within a range (e.g., video scrubber, timeline navigation).
- Rating or scoring interactions where numeric precision is secondary (e.g., satisfaction level, likelihood score).
When Not to Use
- When a range is needed -> use a range slider instead.
- For categorical or non-continuous values (e.g., Small/Medium/Large).
- When users must input an exact number -> provide a numeric field or stepper instead.
- For very large scales where sliding becomes imprecise or tedious.
- For accessibility-critical inputs where precise control is required.
Usage
Labels: Always display minimum and maximum values for context. Display the currently selected value dynamically beside the slider. Add units, symbols, or percentages where relevant.
Defaults: Provide a logical starting value rather than defaulting to extremes.
Handles: Use one handle only. Ensure it is visually distinct and easy to grab on both desktop and mobile. Ensure that the active selection range is visually distinct from the inactive range.
Increments: Define a step size if users shouldn’t select every possible value (e.g., volume in 10% increments). Avoid steps so small that sliding becomes frustrating.
Keyboard Interaction: Enable full keyboard support (Tab to focus the handle, Arrow keys to move in steps).
Accessbility: Some users may struggle with dragging - provide a number input or select field alternative. Let users click anywhere on the track to move the handle instead of forcing drag interactions.
Feedback: Use visual changes (e.g., track fill color) to indicate progress. Provide subtle animations when moving the handle. On mobile, haptic feedback can improve the experience.
Example
