input type='range' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input

Introduction

The range type supports the same set of attributes as the number type.

The following code shows how to use the range Type of the input Element

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <p> 
            <label for="name">
                Name: <!--from   w w  w.  jav  a2  s  .c o  m-->
               <input value="java2s.com" id="name" name="name"> 
            </label> 
         </p> 
         <p> 
            <label for="password">
                Password: 
               <input type="password" placeholder="Min 6 characters" id="password" name="password"> 
            </label> 
         </p> 
         <p> 
            <label for="fave">
                Fruit: 
               <input value="CSS" id="fave" name="fave"> 
            </label> 
         </p> 
         <p> 
            <label for="price">
                $ per unit in your area: 1 
               <input type="range" step="1" min="0" max="100" value="1" id="price" name="price">
               100 
            </label> 
         </p> 
         <input type="submit" value="Submit Vote"> 
      </form>  
   </body>
</html>

Related Tutorials