Slider component

Accessibility

The Slider component has been designed with accessibility in mind, providing range selection functionality that is fully keyboard accessible and screen reader compatible. It automatically implements proper ARIA attributes and supports both single value and range selections.

Accessibility Props

Slider props:

Name	Type	Description
ariaLabel	`string` or `string[]`	Specifies the accessible name for slider handles. For single sliders, use a string. For range sliders, use an array with labels for each handle (e.g., `["From", "To"]`).
ariaValueText	`string`	Provides readable text alternative of current value. Use when the numeric value doesn’t accurately represent the meaning (e.g., time ranges like “00:00 to 13:00”).

Automatic Accessibility Features

The component automatically manages ARIA attributes:
- aria-valuemax is automatically set to the maxValue prop
- aria-valuemin is automatically set to the minValue prop
- aria-valuenow is automatically set to the current slider value
- role="slider" is applied to each handle
Focus management is handled automatically:
- Each handle is keyboard focusable with tabIndex={0}
- Focus indicators are clearly visible
State management is handled automatically:
- Current value is announced to screen readers when changed
- Range boundaries are communicated through ARIA attributes

The Slider component supports the following keyboard interactions:

Arrow Up/Right: Increases the value by one step
Arrow Down/Left: Decreases the value by one step
Home: Sets the handle to the minimum value
End: Sets the handle to the maximum value
Tab: Moves focus to the next handle (in range sliders) or next focusable element
Shift + Tab: Moves focus to the previous handle or focusable element

Best Practices

Always provide ariaLabel to ensure handles have accessible names, especially important for Storybook accessibility compliance
For range sliders, use descriptive labels like ["Departure time", "Arrival time"] rather than generic terms
Use ariaValueText when the numeric value doesn’t represent the actual meaning:
- Time ranges: "00:00 to 13:00"
- Price ranges: "$50 to $200"
- Percentage ranges: "25% to 75%"
When using histograms, ensure the visual information is also available through histogramDescription for screen reader users

Examples

Basic Slider with Accessibility

<Slider
  label="Departure time"
  defaultValue={12}
  minValue={0}
  maxValue={24}
  ariaLabel="Select departure time"
  ariaValueText={`Departure at ${value}:00`}
  onChange={handleChange}
/>

Screen reader announces: “Departure at 12:00, Select departure time, slider”

Range Slider with Accessibility

<Slider
  label="Flight duration"
  defaultValue={[2, 8]}
  minValue={0}
  maxValue={12}
  ariaLabel={["Minimum duration", "Maximum duration"]}
  ariaValueText={`${values[0]} to ${values[1]} hours`}
  onChange={handleChange}
/>

Screen reader announces: “2 to 8 hours, Minimum duration, slider” and “2 to 8 hours, Maximum duration, slider”

Slider