The reference implementation for the slider widget, inspired by Mozilla.org's Accessible DHTML slider Widget.
This slider widget supports expected keyboard and mouse interaction including the slide drag metaphor. One may tab to the slider to focus it and then use the left and right arrow keys to increment/decrement the slider. Home and end will move the slide to either end of the slider. Clicking to either side of the slide will increment the slide in that direction. Mousedown on the slide followed by a drag over the slider element will cause the slide to move with the mouse cursor. The drag is ended when the mouse cursor goes outside the slider, when focus is lost, or when the mouseup event occurs.
Problems: Extending this slider using CSS styling or images is not always clean and some of the code may need to be changed. This is largely the result of the slide drag solution chosen and the particulars of CSS. Mouse interaction tends to select the textnodes that act as the visual "filler" and "slide" indicators. Only the accessible state indicates the actual value of the slider; no readout is visible, currently.