HTML5 Slider Control

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

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

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 …

<html5 slider control

html5 slider control

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

slider control on non-supporting browsers

slider control on non-supporting browsers

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.