Skip to main content

Slider

Enable users to select a value within a set range.

Sliders come in two types: single-value and range selection.

View in StorybookExternal link icon

Behavior​

  • If applicable, we assume that the page or container updates instantly as a user interacts with the slider.
  • Sliders can be continuous (users can select any value within the range) and discrete (users can select values based on predefined steps, such as 1, 5, 10, etc.)
  • Slider captions are interactive—clicking on the caption changes the slider value to the caption value.

Usage​

Single-value selection​

Use a single-value selection slider for selecting a single value from a set range.

Range selection​

Use a range selection slider for selecting two values that indicate the minimum and maximum values of the entire selection.

Best practices​

  • Consider using inputs alongside continuous sliders: for large ranges, it's easier to input a precise value than select one.
  • Avoid using inputs for discrete sliders—ensure that the steps you provide enable users to specify an exact value.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Slider handle's visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Slider Pattern for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.