Summary -

In this topic, we described about the Range input type with detailed example.

The range input type used for entering a numerical value within a stipulated range. It is like the number input, but it presents an easier control for entering a number. It has gained a slider to rise and drop range value.

Syntax -

<input type="range" min="1" max="100" value="0">

Example -

Below example describes how to enter a numerical value.
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Range Input Type</title>
        <script>
            function getValue() {
            var number = document.getElementById("mynumber").value;
            alert(number);
            }
       </script>
  </head>           
   <body>
      <form>
         <label for="mynumber">Select a Number:</label>
         <input type="range" min="1" max="15" step="0.6" id="mynumber">
         <button type="button" onclick="getValue();">Get Value</button>
      </form>            
   </body> 
</html>

Output-

Note! The range input (i.e. type="range") is backed by the whole main web browsers such as Opera, Safari, Firefox, Chrome, Internet Explorer 10 and above.
Browser Support

The following browsers and corresponding versions in the table that completely supports the range type.

Input Type Chrome Edge Firefox Safari Opera
Type="range" 4.0 10.0 23.0 3.1 10.1