HTML Input Elements

---

Creates a control for selecting a range of values.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<input
   list = datalist id
   max = integer
   min = integer
   step = integer
   type = range
>

NOTE: Only the <input> start tag must be present. The element has no end tag.

The <input type=range> element renders a control for selecting a numeric value from a given range of values.

<input type=range> is specified with min and max attributes to define the range of acceptable values.

The control typically displays as a range widget defaulting to the middle value.

If the user’s browser does not support <input type=range>, the control renders as a text input.

A few examples of situations in which range inputs are commonly used:

• Audio controls such as volume and balance, or filter controls.
• Color configuration controls such as color channels, transparency, brightness, etc.
• Game configuration controls such as difficulty, visibility distance, and so forth.

NOTE: <input type=range> should only be used if the control’s exact precise value is not considered important.

The <input_range> element has no attribute of its own, but supports global attributes common to all HTML elements.

The following example shows how a simple <input type=range> control renders on a web page.

<input type="range" min="0" max="10" />

This example shows the control specified with a step attribute.

<input type="range" min="0" max="60" step=5 />

This example shows how the control can be configured to render with tick marks.

<label for="vol">Volume:</label><br />
<input type="range" id="vol" list="markers" step=25 />

<datalist id="markers">
   <option value="0"></option>
   <option value="25"></option>
   <option value="50"></option>
   <option value="75"></option>
   <option value="100"></option>
</datalist>

INPUT   INPUT type=number