Skip to main content

HTML input type="range"

HTML input type="range" is an input element that allows users to select a value within a specific range. This input type is particularly useful when users need to choose a value within a certain range, such as selecting a volume level or setting a slider.

To create an input element with type="range", you can use the following code snippet:

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

In this example, we have created an input element with type="range" with an id of "volume". We have also added a label element to provide context for the input element.

The "min" attribute specifies the minimum value of the range, and the "max" attribute specifies the maximum value of the range. The "value" attribute specifies the initial value of the range.

You can also add other attributes to customize the input element, such as the "step" attribute, which specifies the step size of the range. For example:

<label for="temperature">Temperature:</label>
<input type="range" id="temperature" name="temperature" min="-10" max="40" value="20" step="0.1">

In this example, we have created an input element with type="range" for selecting temperature. The "step" attribute has been added to allow users to select the temperature in increments of 0.1.