Form

Slider

How the Slider works with a keyboard and assistive tech.

Guidance#

Each thumb has role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext.

Arrow keys step the value, Page Up and Page Down take a tenth, Home and End jump to the ends.

In a range, each thumb has its own name, such as Minimum and Maximum, and the thumbs cannot cross.

Pressing anywhere on the track moves the nearer thumb there and focuses it.