Slider Widget

How to use the Slider widget:

Each slider thumb takes up one stop in the tab order. The slider thumb's value can be changed using the following shortcuts:

  • Left Arrow: Descrease value by 1
  • Left Arrow: Inscrease value by 1
  • Page Down: Descrease value by larger increment
  • Page Up: Inscrease value by larger increment
  • Home: Set value to minimum
  • End: Set value to maximum
  • Tab: move focus between multiple thumbs

To be announced properly, the slider must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode,

Accessibility Changes Made to the Original Slider:

  • Added ARIA markup so role, name & state information is exposed
  • Added keyboard support
  • Support for Double Slider labeling

Demo: Example sliders for choosing a price

Choose the price slider

$0

Choose the min and max price double slider

Price range:

$75 $300