Whenever a slider has focus, the keys ←, →, ↑, ↓, Ins and Del can be used to control the slider handle (pressing either the Page up or Page down keys or CTRL and an arrow key will move the handle by two steps at a time), 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”, “valuetext” 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.
fd_slider_describedby
label
View the JavaScript source or read the related article.
The following slider has been created from a select list whose options contain non-numeric values. I've also stipulated that the slider not use the mouseWheel when focused.
class="fd_disable_mousewheel fd_hide_input fd_slider_cn_quarterSize"
The following sliders have been created from similar select lists. I’ve left the associated selectLists visible to enable you to see the value changes. The three different modes of handle movement (tween, jump and timed) are shown.
class="fd_slider_cn_halfSize fd_tween"
class="fd_slider_cn_halfSize fd_jump"
class="fd_slider_cn_halfSize"
The following slider has been created from a text input. I’ve left the associated input visible to enable you to see the value changes. No range has been defined and so the slider defaults to a range of 0 - 100.
class="fd_slider fd_tween"
The following slider has been created from a text input. I’ve left the associated input visible to enable you to see the value changes. An inversed range of 100 - 0 has been defined.
class="fd_slider fd_tween fd_range_100_0"
The rather nice png images and styles for the black sliders were located at schillmania. Go visit…