Slider

Lab component

Slider enables the selection of a single value within a range of values. The control is oriented horizontally, and the currently-selected value is displayed in a tooltip.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Allow cursor interaction of a handle by increasing the target area around the indicator to -size-base. This creates a more accessible click/touch area which meets WCAGs minimum Target Size (2.5.5) standard.

KeyFunction
Tab
  • If focus is outside slider, moves focus to the slider indicator within the tabbing order.
  • If focus is on slider indicator, moves focus to the next component within the tabbing order.
Shift + Tab
  • Moves focus to the previous item within the tabbing order
Up arrow / Right arrow
  • Increase the value of the slider by one step.
Down arrow / Left arrow
  • Decrease the value of the slider by one step.
Home
  • Set the slider to the first allowed value in its range.
End
  • Set the slider to the last allowed value in its range.