Slider control

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

Horizontal Example

Range: 0 to 100 in steps of 1

Coding

<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" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" />

Range: 20 to 50 in steps of 10

Coding

<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" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" />

Vertical Example

Set attribute data-fd-slider-vertical="v-s" to set the slider in vertical position.

Range: 0 to 100 in steps of 1

Coding

<input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Current Value: ' + this.value + ')'" />

Range: 20 to 50 in steps of 10

Coding

<input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Current Value: ' + this.value + ')'" />