ad

Monday, October 20, 2025

how to create range input in html

 

how to create range input in html


web designing theory logo

 <input type="range">

 The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. max - specifies the maximum value allowed.


how to create range input in html

 Example 


<!doctype html>

<html>

<body>

<h2>Range type</h2>

Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>

 Satisfaction: <input type="range" size="2"
name="satisfaction min="1" max="5" value="3">

</Body>

</html>

how to create range input in html

Explain program 

Step 1 ]

<!Doctype html>

  • <!doctype html>  always be the first line of any HTML document.

Step 2 ]

   <html> and </html>

   html  is the root element.

Step 3 ]

<body> and </body>

body  is  main content area.

All visible content inside to  the <body> tag

Step 4]


Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>

 Satisfaction: <input type="range" size="2" name="satisfaction min="1" max="5"
value="3">


   input type = number   :-  create number input  field

   size = "6"                     :- set  width of the input 

   name = "age"              :- name use form submitted

    min  = "18", max="99"   :- entered to between 18 &99
    
    Value ="21"                      :- default value shown the page loads 21
 
           

how to create range input in html

 output 

how to create range input in html

Related Post :-

how to create paragraphs in html

how to add line breaks in html

html tag explained how to create table cells

No comments:

Post a Comment