Glossary
web-design
Slider
Definition
An interactive element that lets users select a value or navigate content by dragging a control along a track.
What is a Slider?
The term "slider" refers to two different web elements:
- Range slider - An input where users drag a handle along a track to select a value (like volume controls)
- Content slider - Another name for a carousel that cycles through content
This entry focuses on range sliders as an input mechanism.
Common Uses for Range Sliders
- Price filters - "Show products from £20 to £100"
- Distance settings - "Search within 25 miles"
- Quantity selection - Visual alternative to number inputs
- Settings controls - Volume, brightness, speed
- Comparisons - Before/after image reveals
Slider Types
| Type | Description |
|---|---|
| Single value | One handle selects a single value |
| Range | Two handles select a minimum and maximum |
| Stepped | Snaps to specific values (e.g., 10, 20, 30) |
| Continuous | Allows any value within the range |
Design Considerations
When Sliders Work Well
- Approximate values are acceptable
- The range is intuitive (0-100, price ranges)
- Visual feedback helps understanding
- Touch screen use is expected
When Sliders Fail
- Precise values are needed (allow text input too)
- The range is very large (hard to select specific numbers)
- On small mobile screens (fiddly to use)
Best Practices
- Show the current value clearly
- Provide text input as an alternative
- Make the touch target large enough for fingers
- Use clear minimum and maximum labels
- Test on mobile devices—sliders are harder to use on touchscreens