How to use range input type in HTML?

Front End TechnologyHTMLWeb Development

A form in HTML is used to take input from the user using various ways or methods. There are many controls helpful in creating a user interface. To take single input, we use textbox and which can be created using <input type=”text” name=”t1”>. This code will show a control like this −

In this control, we can type the exact or precise values which can be later validated or saved in the database. But sometimes we need to have control which will take user’s information or maybe his or her choice of interest where exact information cannot be entered. For example, in case of social media sites, people are asked to enter their level of satisfaction is asked, so in this case only a range can be specified and not the exact value. Another example could be option to provide a price range option using where a visitor does not enter a specific price amount rather he/she is mentioning the price range.

So, in such cases, a normal textbox will not be useful. We will make use of range type of input control which can allow the users to select a value within the range.

The range control is a slider control where by moving the circle, you will be able to select the range. This control is not useful in entering the precise value rather it is used where a precise value is not needed. Let us see a very basic program of range control.

Example

<html> <body> <form name="form1"> <label>Select Weight</label></br> <input type="range" name="weight"> </form> </body> </html>

The default range of this control is from 0 to 100. But we can also set the minimum and maximum value. To set the minimum and maximum values, we can min and max attributes.

Example

<html> <body> <form name="form1"> <label>Select Weight</label><br> <input type="range" name="weight" min="10" max="200"> </form> </body> </html>

In this program, you will not be able to see the minimum and maximum value while moving through the slider.

Apart from min and max, there are other attributes which are quite useful. They are as follows −

  • Step − Step value means the interval value. By default, the step value of slider control is 1. If you want your slider to move 5 steps at a time, then the step value need to be specified as 5.
  • Value − It is the initial value with which a slider is started in the web page.

So, let us make some changes in the previous program and implement step and value attributes as well and display the slide value.

Example

<html> <body> <form oninput="res.value = slider1.value"> <label>Select Weight</label><br> <input type="range" name="slider1" min="10" max="200" step="10" value="30"> <br/> <output name="res" for="slider1">30</output> </form> </body> </html>

In the code given above, on input event handler is used to keep track of user input. A slider is created with the name “slider1” with min value as “10” and max value as “200” and a step value of “10”. To display the value of slider when it is moved, <output> tag is used to display the result of the slider.

The initial value is set to 30 because value attribute is given parameter as “30”.

Now it is set to beginning and value is printed as 10 because min value is given as 10.

This screenshot is showing the maximum value for which the slider is set and that is 200.

raja
Updated on 23-Aug-2022 12:01:43

Advertisements