# Accessible Unobtrusive “Slider/HTML5 range polyfill tooltip” Demo

## Accessibility enhancements: Keyboard Controls

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.

## Quick demo

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.

Remember, this is an experiment. It will only work in browsers that support positioning generated content (so no Internet Explorer).

HTML5 input type="range" polyfill tooltip test

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.

Range: -10 to 10 in steps of 0.2

Javascript slider initialisation tooltip tests

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.

Range: -10 to 10 in steps of 0.5

Range: 5 to 15 in steps of 0.2

Range: 5 to 15 in steps of 0.2

The following slider has been associated with a `<select>`.

Select List with eight options