Hot!Ajax

The script automatically assigns each slider the required ARIA role of “slider” and states “valuemax”, “valuemin” and “valuenow”.

by frequency-decoder

download

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.

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"

Additionally, an object method has been programmatically stipulated as the callback function (view the source to see how it was done). The method simply updates the text of a paragraph with the hidden inputs current value.

SelectList demo

The following slider has been created from a select list. The range is automatically calculated using the select lists option values.

class="fd_slider"

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.

< Prev		Next >