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.
input field using
The input field can be added with t
ype="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
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
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.
<h2> Range in input field</h2>
<input type="range" id="vol" name="vol" max="50" min="2" step="2">
Here is the output of the above program.
You can try this code example in the Live editor above.
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.