How To Use HTML DOM Input Range Object In JavaScript

admin_img Posted By Bajarangi soft , Posted On 01-10-2020

In Java script we can use html dom input range object to get data range when i click button so today we are going discuss about html dom input input range in java script

How To Use HTML DOM Input Range Object In JavaScript

Input Range Object

The Input Range object represents an HTML <input> element with type="range".

Note: <input> elements with type="range" are not supported in Internet Explorer 9 and earlier versions.

Access an Input Range Object

You can access an <input> element with type="range" by using getElementById():

Example(1)

<input type="range" id="myRange" value="90">
<button onclick="create_new_range()">Click it</button>
<h2 id="demo"></h2>
<script>
    function create_new_range() {
        var x = document.getElementById("myRange").value;
        document.getElementById("demo").innerHTML = x;
    }
</script>

In above example when you click button it will get the value of the slider control.

Example(2)
<button class="btn btn-success" onclick="creat_input_range()">Create it</button>
<script>
    function creat_input_range() {
        var x = document.createElement("INPUT");
        x.setAttribute("type", "range");
        document.body.appendChild(x);
    }
</script>

In above example when you click button you get new input range.
 

Input Range Object Properties
 

Property Description
autocomplete Sets or returns the value of the autocomplete attribute of a slider control
autofocus Sets or returns whether a slider control should automatically get focus when the page loads
defaultValue Sets or returns the default value of a slider control
disabled Sets or returns whether a slider control is disabled, or not
form Returns a reference to the form that contains the slider control
list Returns a reference to the datalist that contains the slider control
max Sets or returns the value of the max attribute of the slider control
min Sets or returns the value of the min attribute of the slider control
name Sets or returns the value of the name attribute of a slider control
step Sets or returns the value of the step attribute of the slider control
type Returns which type of form element the slider control is
value Sets or returns the value of the value attribute of a slider control


Input Range Object Methods

Method Description
stepDown() Decrements the value of the slider control by a specified number
stepUp() Increments the value of the slider control by a specified number

Complete Code For Use HTML DOM Input Range Object In JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>How To Use HTML DOM Input Range Object In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    .INPUT{
        margin-left: 80px;
    }
    #myLocalDate{
        margin-left: 0px !important;
    }
    h1{
        color: red;
    }
    input[type="range" i] {
        width: 135px;
        margin-left: 105px;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>Use HTML DOM Input Range Object In JavaScript</h1>
    </div>
    <br>
        <div class="well">

            <input type="range" id="myRange" value="90">

            <button class="btn btn-primary" onclick="get_value()">Click it</button>

            <h2 id="demo"></h2>
            <button class="btn btn-success" onclick="creat_input_range()">Create it</button>
            <script>
                function get_value() {
                    var x = document.getElementById("myRange").value;
                    document.getElementById("demo").innerHTML = x;
                }

                function creat_input_range() {
                    var x = document.createElement("INPUT");
                    x.setAttribute("type", "range");
                    document.body.appendChild(x);
                }
            </script>
        </div>
    <div>
</body>
</html>

Related Post