HTML5: Create a slider using range

The range input type creates a slider interface.

And like the number input type, it can use the min, max, and step attributes.

<input min='0' max='10' step='1' required type='range' id='range_id' name='range'/>

We use a unit step of 1 for the example.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Slider</title>
</head>
<body>
<form>
    <label for='range_id'>Volume Control</label>
    <input min='0' max='10' step='1' required type='range' id='range_id' name='range'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

I have tried out the slider in the different browsers.

Here is Chrome implementation.  Slider is supported in Chrome.

chrome_slider

Here is the mozilla implementation.  It is not supported.

firefox_slider

 

 

Here is the Safari implementation.  It is supported.

Safari_slider

 

Here is the IE implementation.  It is supported.

ie_slider

 

Series Navigation<< HTML5: Number picker
HTML5: Color picker >>