Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add a Range Slider using HTML ?

  • Last Updated : 30 Sep, 2021

In this article, we will learn how to add a Range Slider in HTML. So Geeks as we know that a Range Slider is used to select a particular value from a range of numbers. We have default range values from 0 to 100. 

Follow the given steps to complete the task –

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Approach:

  • First, we create an HTML document that contains a <form> element.
  • Create an <input> element under the form element.
  • Use the type attribute with the <input> element.
  • Set the type attribute to value “range”.
  • We can also use the min, max, step, and value attributes to set the restrictions on Range Slider.

Syntax:



<input type="range">

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to add a Range Slider using HTML?
  
    </title>
  
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <h2>
        How to add a Range Slider using HTML?
    </h2>
    <input type="range" id="Geek_Range" value="90">
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!