Input type="range" polyfill (slider control)

Purpose

The <input type="range" /> allows to display a slider control bar. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

Relevant attributes

Use the following attributes to specify restrictions:

• max - specifies the maximum value allowed
• min - specifies the minimum value allowed
• step - specifies the legal number intervals
• value - specifies the default value

Examples

<input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" />

<input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" />

<p id="slider-prg"></p>

$slider = $( "<input name='html5shim-3' id='html5shim-3' type='range' value='50'/>" );
$slider.appendTo( "#slider-prg" ).trigger( "wb-init.wb-slider" );
setTimeout( function() {
	$slider.get( 0 ).value = 85;
	$slider.trigger( "wb-update.wb-slider" );
}, 2000);