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 vertical slider has been created from a text input. It has a defined range of -20.2 to 20.2 in increments of 0.2 and a return value precision of two decimal places. Two simple callback functions have been defined, one that creates the paragraph used to output the current slider value and another that updates this paragraph whenever the slider value changes.
The following vertical slider has been created from a text input. It has a defined range of 20.2 to -20.2 in increments of 0.2 and a return value precision of two decimal places. Two simple callback functions have been defined, one that creates the paragraph used to output the current slider value and another that updates this paragraph whenever the slider value changes.
The rather nice png images and styles for the black sliders were located at schillmania. Go visit…