Form Elements
Slider
Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track.
Examples
Label*
40%Description
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- role="slider" with aria-valuemin, aria-valuemax, aria-valuenow
- aria-label or aria-labelledby for screen readers
- Focus ring visible at 2px offset (#4a2bc2)
- Minimum 44px thumb touch target
- Color contrast 4.5:1 on track and thumb
When to use this component
✓Do's
- •Users need to select a value from a continuous range
- •The exact value is less important than the relative position
- •Adjusting settings like volume, brightness, or zoom
- •Filtering results by a numeric range (e.g., price, distance)
✕Don'ts
- •If users need to enter a precise value, use Input with type="number".
- •If the range has very few options (3–5), use Radio buttons.
- •If the value change has serious consequences, sliders are imprecise.
- •Users need to select from non-numeric discrete options
Do's and Don'ts
✓ Do's
Budget Range*
60%0
10
20
30
40
50
60
70
80
90
100
Slide to set your range
Show tick marks and value labels so users understand the range scale and current position.
✗ Don'ts
Don't use a bare slider with no label, ticks, or value indicators, users cannot determine scale or current value.