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.

See the Modernizr/yepnope demo for a better example on how to include the CSS and JS files when using the polyfill.

<input type="range"
       name="html5shim-1"
       id="html5shim-1"
       min="-10"
       max="10"
       step="0.20"
       value="8.2"
       title="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.

<input type="range"
       name="html5shim-2"
       id="html5shim-2"
       step="1"
       value="75"
       title="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).

<input type="range"
       name="html5shim-3" 
       id="html5shim-3" 
       data-fd-slider-vertical="v-s"
       min="100"
       max="0"
       step="1"
       value="50"
       title="Range: 100 to 0 in steps of 1" />
<style>.v-s { height:300px }</style>

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.

<input type="range" 
       name="html5shim-4" 
       id="html5shim-4" 
       min="100" 
       max="0" 
       step="1" 
       value="50"
       title="Range: 100 to 0 in steps of 1" />
<style>#html5shim-4 { height:400px }</style>

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.

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.

The following slider has the “forceValue” parameter set to TRUE, which forces the associated text input to show a valid value.

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

Disable Enable

Dynamic Creation