Range Slider
Range Slider component allows users to select a value or a range within a predefined scale by dragging a handle. It provides a more interactive and visual alternative to numeric input fields, making it ideal for adjustable settings, pricing filters, volume controls and progress tracking.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Minimum 44×44px touch target for slider handles (WCAG 2.5.5)
- Focus ring with offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet 3:1 for track and handle (WCAG 1.4.11)
- Supports aria-valuemin, aria-valuemax, aria-valuenow attributes
- Semantic slider role for assistive technologies
When to use this component
✓Do's
- •The user is choosing a band between two values, such as a price or income range
- •The approximate position matters more than an exact figure
- •The scale is bounded and both ends are meaningful to the user
- •Feedback is immediate, such as a live count of matching results
✗Don'ts
- •Only one value is being chosen, use Slider instead
- •The value must be exact, such as a fee or an age, use paired number Inputs
- •The range is very large or open-ended, dragging becomes imprecise
- •There are only a few valid options, use Radio Button or a Dropdown Menu
Do's and Don'ts
Show the selected values and the effect of the selection. Users can then judge the range without submitting the form.
Don't ship a bare track. With no label, no values and no ticks, the user cannot tell what they have selected or what the scale means.
Name the unit in the label. "Plot area (sq. m)" removes the guesswork that a bare number leaves behind.
Don't use a range slider for exact values like a date of birth. Dragging cannot be precise, use Date Picker or a number Input.