- Skip to main content
- Skip to "About this site"

# Input type="range" polyfill (slider control)

- Documentation
- Questions or comments?

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

### Range: 0 to 100 in steps of 1

View code

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

### Range: 20 to 50 in steps of 10

View code

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

### Range: Programmatically created

View code

#### HTML

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

#### JavaScript

    $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);

Date modified:
  2014-07-20