Accessible Unobtrusive Slider Demo

Accessibility Enhancements (ARIA)

Whenever a slider has focus, the arrow keys ←, →, ↑ and ↓ can be used to control the slider handle, 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 script automatically assigns each slider the required ARIA role of “slider” and states “valuemax”, “valuemin” and “valuenow”.

Should an element with an id of fd_slider_describedby exist, this is used to set the ARIA “describedby“ relationship. Additionally, should the sliders associated form element itself have an associated label, this label is used to set the ARIA “labelledby” relationship.

View the JavaScript source or read the related article.

Horizontal slider & callback function test

The following three sliders have been created by giving the associated input the following className:

class="fd_range_0_255 fd_classname_extraclass fd_callback_updateColor"

Vertical slider, negative range & object method callback test

The following vertical slider has been created by giving the associated input the following className:

class="fd_range_-255_255 fd_hide_input fd_tween fd_vertical fd_classname_verticalclass fd_callback_myObject-callback"

Additionally, an object method has been stipulated as the callback function. The method simply updates the text of a paragraph with the hidden inputs current value.

SelectList demos

The following slider has been created from a select list whose options contain non-numeric values. A simple callback function updateSelect1 has been defined that updates the slider’s associated label.

class="fd_slider fd_callback_updateSelect1 fd_tween"

The following slider has been created from a select list. No tween is required and so the script bases the required number of “steps” by using the total number of option tags located. A simple callback function updateSelect2 has been defined that updates the slider’s associated label.

class="fd_slider fd_callback_updateSelect2"

Alternative styling demo

The following sliders have been created by giving their associated inputs the following className:

class="fd_tween fd_range_0_255 fd_vertical fd_hide_input"

Additionally, the wrapper fieldset has been given an id that enables us to target & change the style of the sliders contained within.

Don’t forget folks

The rather nice png images and styles for the black sliders were located at schillmania. Go visit…