< Back to Demos | Learn more at PaulJAdam.com >

Multi-Thumb Slider with input type=range

Native input type=range sliders do not support multiple thumbs yet so this demo uses two range inputs and position them to look like a multi-thumb slider.

Custom ARIA sliders are not operable using VoiceOver for iOS on iPhone/iPad to adjust the value, whereas a native HTML input type=range slider can be adjusted correctly with mobile screen readers. Same problem exists with TalkBack and Chrome on Android, the screen reader user can use their Volume Up/Down keys to adjust the values of native sliders but not with custom sliders.

Keyboard operability of custom sliders works on Android when using a bluetooth keyboard. iOS does not detect keyboard events in Mobile Safari. iOS does not support keyboard operability like desktop and Android. I can tab to a native slider in iOS Safari with Option+Tab but I cannot operate the slider at all with a keyboard.

Native sliders also give you free support for Home/End, and Page Up/Page Down keys to quickly adjust the slider values. Custom sliders require all the extra keyboard support to be added manually, http://w3c.github.io/aria-practices/#slider.