Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Range object
The HTML DOM Input Range object is associated with the <input> element with type “range”. We can create and access an input element with type range using the createElement() and getElementById() method respectively.
Properties
Following are the properties for the Input range object −
| Sr.No | Property & Description |
|---|---|
| 1 | autocomplete To set or return the autocomplete attribute value of a range control. |
| 2 | autofocus To set or return if the range slider control should get focus automatically when the page loads or not |
| 3 | defaultValue To set or return the range slider control default value. |
| 4 | disabled To set or return if the slider control has been disabled, or not. |
| 5 | form To return the reference of the form containing the slider control |
| 6 | List To return the reference to the datalist containing the slider control |
| 7 | Max To set or return the max attribute value of the slider control. |
| 8 | Min To set or returns the min attribute value of the slider control. |
| 9 | Name To set or return the name attribute value of the slider control. |
| 10 | Step To set or return the value of the step attribute of the slider control. |
| 11 | Type To return the form element type for the slider control. |
| 12 | value To set or return the value attribute value of a slider control. |
Methods
Following is the method for the password object −
| Sr.No | Method & Description |
|---|---|
| 1 | stepDown() To decrement the slider control value by a given number |
| 2 | stepUp() To increment the slider control value by a given number. |
Example
Let us look at an example for the Input Range object −
<!DOCTYPE html>
<html>
<head>
<script>
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>Output
This will produce the following output −
On clicking the CREATE button −
In the above example −
We have created a button CREATE that will execute the rangeCreate() method when clicked by the user −
<button onclick="rangeCreate()">CREATE</button>
The rangeCreate() method uses the createElement() method of the document object to create the <input> element by passing “INPUT” as a parameter. The newly created input element is assigned to variable R and using the setAttribute() method we create a type attribute with value range.
Remember, setAttribute() creates the attribute and then assigns value if the attribute doesn’t exist previously. Finally using the appendChild() method on document body we append the input element with type range as the child of the body −
function createPASS() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}
131 Views
