How to create a Range(Slider) field in Form in HTML?
Answer: Using an input tag with type attribute value as range, we can create a range selector field in HTML form.
In an HTML form if you have a field that can take value within a range, for example, 1 to 100, then having a range selector input field is a good idea. Using it, the value can be selected using a slider that automatically returns a value. This looks good on the UI and delivers a better user experience.
For example, If you have some form in which user has to set their Age, you can have a range field from 0 to 100.
Creating input field using type range
The input field can be added with type="range" to convert it into a range field. The range input field does not include a typical text box for entering values. Instead, it uses sliders or dials which control the values within a defined range.
Here is the basic syntax:
<input type="range" />
Example: Creating an input field with a range
The max and min attributes are required to define the range of the input field.
Click on the Run button to see the code in action.
Attributes in range inputs:
There are some attributes that can be added to customize the range field.
-
max - It is used to set the maximum value for the range. The default maximum value of the range is 100. We can change it using the max attribute.
-
min - It is used to set the minimum value for the range. The default minimum value is 0.
-
step - It is the interval value between each step. The default value is 1. This attribute decides, when a user drags the range slider, by how many numbers the value will jump.
Example: Using attributes in the range input field
Here in the example below, we will use all three attributes for the input range.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Range in input field</h2>
<div>
<input type="range" id="vol" name="vol" max="50" min="2" step="2">
<label for="vol">Volume</label>
</div>
</body>
</html>
Output:
Here is the output of the above program.
You can try this code example in the Live editor above.
Conclusion
The range input field is widely used in websites by developers. For setting volumes to adjusting color configurations, setting gaming difficulty levels, and for many more use cases, and now you know how to use it too.
