Slider Example

HTML Range Type Input with Role Set to Slider and Using ARIA-Valuetext for Reporting

Note: If not using range input and using custom HTML elements to build the slider control, developers should follow guidelines for slider in the ARIA Authoring Practices. When using a range input, it is necessary only to set role=slider and update aria-valuetext with appropriate values. The native range input is accessible with mobile screen readers whereas custom sliders will take much more work on mobile to make them accessible.

Some Other Examples for Testing Increments

Slider with 4 values, from 0 to 15, in 5 step increments

Slider with 100 values, from 1 to 100, continuous, starting at 50

Slider with 200 values, from 1 to 200, in 1 step increments

Slider with 2000 values, from 1 to 2000, in 1 step increments

Slider with 70 values, from 1 to 70, continuous

Slider with 50 values, from 1 to 50, in 1 step increments

Slider with 40 values, from 1 to 40, continuous

Slider with 10 values, from 1 to 10, continuous

Slider with 21 values, from -30 to 30, in 3 step increments

Slider with 10 values, from 0.1 to 1, in 0.1 increments (floating point)