Using the Range Input Type

Specifying type="range" for a form field causes a range slider to publish. It is an HTML5 attribute.

The range field allows the form user to slide the button left or right to represent a degree of bad to good, high to low, dislike to like, or other range ideas.

The range field's appearance depends on the browser. Here is how it appears in yours:

The code for the above example is.

<input type="range">

The type="range" fields value is a number. If the number is a zero, some browsers assume a blank value instead of the digit.

Defaults

When no other attributes are specified for the field, the range minimum is 0 and maximum is 100. The range for the slider button is in 1‑step increments. Thus, the slider value is anywhere from 0 to 100 in single‑step whole‑number increments (ie, 3 87 43 9).

Give it a try on a test page.

<form action="http://example.com/datadump.php">
<input type="range" name="testing">
<input type="submit">
</form>

For this and subsequent test page code, change http://example.com/datadump.php to the URL of form handling software you use for testing.

When submitted, the value sent to the script depends on the position of the slider button.

(If you don't have a utility script installed on your server for testing forms, install the data dump script. It is ever so handy to do quick form submission value tests.)

Specifying a Step

Specifying a step tells the browser at what increments the select button may be slid to. This example contains the step="25" attribute:

The code for the above example is.

<input type="range" step="25">

You'll notice the slider button insistes on landing at either the left, right, or quarter positions.

The value the browser is able to send to the form handling software is 0 (or blank), 25, 50, 75, or 100.

Give it a try on your test page.

<form action="http://example.com/datadump.php">
<input type="range" step="25" name="testing">
<input type="submit">
</form>

Specify any step according to your requirements. If omitted, step="1" is the default value.

Specifying Range Minimum and Maximum Values

The type="range" field will have a range of 0 through 100 unless a minimum or maximum value is specified.

To specify a minimum value, use the min attribute. Similarly, to specify a maximum value, use the max attribute.

With min="250" and max="500", and the step value continuing to be specified as 25, the slider button can select 250, 500, or any number between those two ranges that is divisible by 25.

The field looks the same regardless what the minimum and maximum values are. But the slider button is likely to behave differently depending on the step value. Example:

The code for the above example is.

<input type="range" min="250" max="500" step="25">

Give it a try on your test page.

<form action="http://example.com/datadump.php">
<input type="range" min="250" max="500" step="25" name="testing">
<input type="submit">
</form>

A Reason for Using a Range Input Field

Here is one reason for using a range input field, to get a value feedback. The person may be asked to rate something between worst and best.

Let's assume the range is 1 through 5 with 1‑step increments. Example:

Please rate this:

Give it a try on your test page.

<form action="http://example.com/datadump.php">
Worst <input type="range" min="1" max="5" step="1" name="testing"> Best
<input type="submit">
</form>

I'm certain you'll find other places where the range input field is exactly what's needed. A slider bar is likely to be easier to use than typing a number into a text field.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager