Unobtrusive 'Slider' control

Configuring the Slider

All of the Sliders configuration parameters should be defined within the input tags className attribute.

Stipulating the Sliders numeric range

To define your required range, add the className fd_range_lowerlimit_upperlimit to the associated input’s className e.g. the classname ‘fd_range_-255_255’ will give the slider a numeric range of -255 to 255. This is a required className – without it, no slider control is created.

The Animated Tween

Should the input’s className contain fd_tween, clicking on the slider bar initiates a tween animation that scrolls the slider’s “drag-handle” to the point in which the mouseDown event occurred.

Should this className be omitted, clicking on the slider bar will move the slider drag-handle 10% of the defined range in the direction of where the mouseDown event occurred. Clicking and holding down the mouse button will initiate a timer that automatically moves the drag-handle i.e. repeatedly clicking on the slider bar isn’t necessary.

Stipulating a JavaScript callback function

Should you wish the slider to call another JavaScript function each time the slider handle is moved, give the associated input a className fd_callback_callbackFunctionName e.g. the classname ‘fd_callback_updateColor’ will get the slider to call the javascript function ‘updateColor()’ each time the drag-handle moves (as can be seen in the demo).

Of course, as the function name is being declared within a CSS className, the name itself is limited to the set of alphanumeric characters valid for use within such a CSS className i.e. while the character “$” is a valid JavaScript function name, it is not a valid character for use within a CSS className and so should be avoided.

Hiding the original input

Giving the input a className of fd_hide_input will do exactly that, and hide the input element on slider creation (the default functionality is to keep the input visible).

Inputs are hidden by setting their type to “hidden” and so they still appear in the DOM and their value will be submitted to the server.

Vertical sliders

Vertical sliders can be created by adding fd_vertical to the associated input’s className.

Styling the slider

Sliders can have an additional className given to them (to enable you to style them differently to the others) by adding fd_classname_yourclassnamehere to the associated input’s className e.g. the className ‘fd_classname_hunkydory’ will give the associated slider control an extra class of ‘hunkydory’.

Additionally each slider control is given a unique ID of the form ‘fd-slider-theAssociatedInputElementsId’. This enables you to target individual sliders within the CSS and also enables DOM access to the top level slider div by using document.getElementById.

Keyboard accessibility

Once a slider has focus, the arrow keys can be used to move the drag handle (by default, the drag handle moves by 5% of the defined range), the “Home” button to move the slider to it’s minimum value and the “End” button to move the slider to it’s maximum value. Additionally, each slider is given the WAI-ARIA role of slider and it’s associated states valuemax, valuemin and valuenow.

MouseWheel support

MouseWheel support currently exists for Internet Explorer and FireFox/Mozilla.

While Opera and Safari support the mouseWheel within JavaScript, they do not support the extending of DOM elements with a tabindex for the purposes of making them keyboard accessible i.e. enabling them to support the focus and blur events; and as it’s the focus and blur events that are used to add and remove the mouseWheel event handlers, mouseWheel support is (currently) impossible in these browsers.

Bugs and annoyances

The demo uses png images for the slider drag-handles and will therefore will only display in Internet Explorer (5.5+) by using additional and proprietary css filter behaviours (which are passed using conditional comments within the demo). All other modern browsers display the png images as intended.

The License

The script is now released under a creative commons Attribution-ShareAlike 2.5 license. Should you use the script within a commercial context please think about clicking the payPal donate button – it’s certainly not an obligation but it would most certainly put a smile on my face.

Demo and download

Tested in Internet Explorer 6, Firefox and Mozilla.

View the slider demo or download the javascript source.