HTML DOM Input Range list Property

HTML DOM Input Range list Property

Last Updated : 30 Aug, 2022

The input Range list property in HTML DOM is used to return a reference to the datalist element that contains an input range field.

Syntax:

rangeObject.list.id

Return Value: It returns a string value that represents the value of the id attribute of the datalist element.

Example: Below HTML code is used to return the input range list property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input range list Property
    </title>
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM Input Range value property</h2>
    <input name=G eek_range type="range" 
        id="Geek_Range" list="rangers" value="90">
    <datalist id="rangers">
        <option value="15"/>
        <option value="20"/>
        <option value="40"/>
        <option value="30"/>
        <option value="35"/>
    </datalist>
    <br>
    <br>
    <button onclick="myGeeks()">
        Click Here
    </button>
    <p id="Geek_p"></p>


    <script>
        function myGeeks() {
            var x =
                document.getElementById(
                    "Geek_Range").list.id;
            document.getElementById(
                "Geek_p").innerHTML = x;
        }
    </script>
</body>
</html>

Output:

Supported Browsers: The browser is supported by DOM input range list property are listed below:

Google Chrome 4
Edge 12
Firefox 23
Opera 11
Safari 3.1

HTML DOM Input Range list Property

M

manaschhabra2

Improve

Article Tags :

Similar Reads

HTML | DOM Input Range min Property

The Input Range min Property in HTML DOM is used to set or return the value of min attribute of the slider control. The min attribute is used to specify the minimum value of slider control. Syntax: It returns the Input Range min Property:rangeObject.minIt is used to set Input Range min Property:rang

HTML DOM Input URL list Property

The input URL list property in HTML DOM is used to return a reference to the datalist element that contains an input URL field. Syntax: urlObject.list.id Return Value: It returns a string value that represents the value of the id attribute of the datalist element. Example: Below HTML code is used to

HTML DOM Input Tel list Property

The input Tel list property in HTML DOM is used to return a reference to the list element that contains an input tel field.Syntax:telObject.list.idReturn value: It returns a string value that represents the value of the id attribute of the datalist element.Example: Â Below HTML code used to return th

HTML | DOM Input Range max Property

The Input Range max Property in HTML DOM is used to set or return the value of max attribute of the slider control. The max attribute is used to specify the maximum value of slider control. Syntax: It returns the Input Range max Property:rangeObject.maxIt is used to set Input Range max Property:rang

HTML DOM Input Text list Property

The input Text list property in HTML DOM is used to return a reference to the datalist element that contains an input text field. Syntax: textObject.list.id Return Value: It returns a string value that represents the value of the id attribute of the datalist element. Example: Below HTML code used to