Skip to content

Slider

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the slider.
Right Arrow , Up ArrowIncreases slider value one step.
Left Arrow , Down ArrowDecreases slider value one step.
HomeSet the slider to the first allowed value in its range.
EndSet the slider to the last allowed value in its range.

Roles and attributes

The following list describes roles and attributes that the component already has.

Roles and attributes
RoleAttributeElementUsage
sliderdivIdentifies the element as a slider. Set on the div that represents as the movable thumb because it is the operable element that represents the slider value.
tabIndex="0"divIncludes the slider thumb in the page tab sequence.
aria-valuemax="255"divSpecifies the maximum value of the slider.
aria-valuemin="0"divSpecifies the minimum value of the slider.
aria-valuenow="NUMBER"divIndicates the current value of the slider.
aria-valuetext="string"divDefines the human readable text alternative of aria-valuenow for a range widget.
aria-labelledby="IDREF"divRefers to the element containing the name of the slider.
aria-orientationdivIndicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Resources

Other recommendations

Find more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.