HTML5 now allows us to create a whole new kind of input. The range tag creates a slider control, allowing the user to choose among a range of values. This used to be difficult, but not anymore! Check it out!
Interestingly, we can use virtually the same code as we did in the number example, but change the input type to "range"
. Here's how to do it:
<form> <label>How many shoes would you like to purchase?<label> <input type="range" name="quantity" min="2" max="6" step="2" value="2" /> </form>
Notice we can use the same optional min, max, step, value
, and size
attributes.
Specifying <input type="range">
will display the new form control with a slider, allowing the user to increase and decrease the value in the field: