HTML5 Slider Control

Posted in Tutorials

New to HTML5 is the slider control. Actually, it is the “input” element but with a new type attribute called “range”.  It is better explained by some sample HTML code …

<form action="slider-control.php" method="post">
<input type="range" min="1" max="9" step="1" name="rating" />
<input type="submit" />
</form>

This creates a slider control with a range of values from 1 to 9 (inclusive) and with an increment (or step) of 1.   See code example.

On Chrome 8 it shows …

But in browsers that do not support the range attribute in the input element, you get a typical input box …

But at least it still works.

To test that it submits the value properly, you have to construct an PHP page to which the form would post to.  For example…

The value submitted was <?php  echo htmlspecialchars($_POST["rating"]);  ?>

See W3C Working draft on the input range control.

---