This example requires Firefox 3 or later to work with screen readers -- it uses ARIA properties without namespaces, which is now the correct markup.

This is a slider. It has two buttons on either end marked role:button and a slider in the middle marked role:slider. When you tab on to the slider and use the arrow, End and Home keys to change the value. Also just to draw people into useing it, we have some mouse events. You can click on the buttons or drag the slider.

It is easy to adjust the width of the slider or the speed it changes. We just set two variables at the begining of the JavaScript. Or to have different values for each slider with pop a script tag just before the slider with the values we want.

0 100