Whenever a slider has focus, the keys ←, →, ↑, ↓, Ins and Del can be used to control the slider handle (pressing either the Page up or Page down keys or CTRL and an arrow key will move the handle by two steps at a time), the Home key to set the slider at it’s minimum value and the End key to set the slider at it’s maximum value.
The CSS file uses generated content to create the tooltip (by styling the drag handles :before and :after pseudo elements) and the value of the aria-valuetext attribute, which is dynamically set by the script, to generate the tooltip content.
:before
:after
aria-valuetext
Remember, this is an experiment. It will only work in browsers that support positioning generated content (so no Internet Explorer).
When the window.onload event fires, the following input elements will be automatically converted into sliders only if the browser does not recognise the HTML5 “range” state.
window.onload
Testing the tooltip display with the three different forms of drag handle animation, timed, jump & tween and also the use of the aria-valuetext property. Please note, sliders have to have the forceValue parameter set to true for the aria-valuetext property to be assigned a value at all times.
The following slider has been associated with a <select>.
<select>
Smallest Smaller Small Normal Large Larger Largest