Accessible, Unobtrusive “Slider/HTML5 range polyfill” Demo

Keyboard Controls

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 the minimum value and the End key to set the slider at the maximum value.

Mixed HTML5 Polyfill & Javascript API Creation Demos

…as usual, “View Source” is your friend

HTML5 input type="range" polyfill tests

When the window.onload event fires, the following input elements will be automatically converted into sliders only if the browser does not recognise the HTML5 input “range” state.

Please Note: At the time of writing, only webkit and Opera support the input range state and even then, they do not appear to fully support vertical ranges (webkit) or ranges that have a minimum value greater than the maximum value (both webkit and Opera).

Range: -10 to 10 in steps of 0.2

stepUp() or stepDown()

The following Input has an onchange event that updates the value of a span positioned within the associated label.

Range: 0 to 100 in steps of 1

stepUp() or stepDown()

The following input element has been assigned a custom data- attribute named data-fd-slider-vertical which tells the script to create a vertical slider. Additionally, the value of the data-fd-slider-vertical attribute, in this case “v-s”, is added as a classname to the associated slider – this enables you set the slider height using a CSS classname (which, in this case, sets a height of 300 pixels).

Range: 100 to 0 in steps of 1

stepUp() stepDown()

CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs the script to create a vertical slider.

Range: 100 to 0 in steps of 1

stepUp() stepDown()

Javascript initialisation tests

The first three sliders show the three different “handle to clickpoint” animation styles: timed, jump & tween respectively. Additionally, the third slider has the “forceValue” parameter set to TRUE.

Range: -10 to 10 in steps of 0.5

Disable Enable

The following slider has a 50:13 scale set, which means that when the drag handle is at the 50% mark, then the slider value should be 13.

Range: 5 to 15 in steps of 0.2 with a (50:13) scale

The following slider has the “forceValue” parameter set to TRUE, which forces the associated text input to show a valid value. Two callback functions have been defined for the create and change slider events. The create callback (fired once whenever the slider has been created) injects a span into the DOM and hides the associated input, while the change callback simply updates this span with the current slider value.

Range: 5 to 15 in steps of 0.2

The following slider has been associated with a <select>.

Select List with eight options

Disable Enable

Dynamic creation test

Testing the dynamic creation of non-polyfill sliders.