Table of Content
The <input type=”range”> defines a control for entering a number whose exact value is not important (like a slider control).
The default range is 0 to 100. But, you can set restrictions on what numbers are accepted with the attributes below.
<input type="range" name="points" min="0" max="10">
As the name suggests, the most common use of the slider input is when we know the lowest and the highest inputs that can be given as a response.
For instance, if we are developing a website that only permits users in the age group 18-40. We can have the birth year as a sliding input range with the lowest value being 1986 and the highest being 1998. The slider input is a highly intuitive user interface that projects itself as an alternative to a plain textbox input or a drop-down with fixed values.
What are the additional range input attributes?
In addition to the attributes shared by all <input> elements, range inputs offer the following attributes: max, min, and step.
While the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.
How to properly use range inputs?
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, world size, and so forth.
Password length for a password manager’s generated passwords.
As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think “set the volume at halfway to maximum” instead of “set volume to 0.5”.