The DOM Input Range disabled Property is used to set or return whether the Input range Field must be disabled or not. A disabled range Field is un-clickable and unusable. It is a boolean attribute and used to reflect the HTML Disabled attribute. It is usually rendered in grey color by default in all the Browsers.
Syntax:
- It returns the disabled property.
rangeObject.disabled
- It is used to set the disabled property.
rangeObject.disabled = true|false
Property Values:
- true: It defines that the Input range field is disabled.
- False: It has a default value. It defines that the Input range Field is not disabled.
Return Value: It returns a boolean value which represents that the Input range Field is disabled or not.
Example-1: This Example illustrates how to return the Property.
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Input Range disabled Property
</title>
</head>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
DOM Input Range disabled property
</h2>
<form id="geeks">
<input name=G
eek_range type="range"
id="Geek_Range"
value="90"
disabled>
</form>
<br>
<br>
<button onclick="myGeeks()">
Click Here
</button>
<p id="Geek_p"></p>
<script>
function myGeeks() {
// Return input range disabled property.
var x =
document.getElementById(
"Geek_Range").disabled;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example illustrates how to set the Property.
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Input Range disabled Property
</title>
</head>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
DOM Input Range disabled property
</h2>
<form id="geeks">
<input name=G
eek_range type="range"
id="Geek_Range"
value="90"
disabled>
</form>
<br>
<br>
<button onclick="myGeeks()">
Click Here
</button>
<p id="Geek_p">
</p>
<script>
function myGeeks() {
// Set input range disabled property
var x =
document.getElementById(
"Geek_Range").disabled = false;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM input range disabled Property are listed below:
- Google Chrome 4 and above
- Edge 12 and above
- Firefox 23 and above
- Opera 11 and above
- Safari 3.1 and above