# 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" />

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" />

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>

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.

    <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>

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.

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