Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Range disabled property
The HTML DOM Input Range disabled property sets or returns whether a range slider should be disabled. When set to true, the range slider becomes greyed out and unresponsive to user interaction. The property accepts boolean values and defaults to false.
Syntax
Following is the syntax for setting the disabled property −
rangeObject.disabled = true|false;
Following is the syntax for getting the disabled property −
var isDisabled = rangeObject.disabled;
Parameters
The disabled property accepts the following boolean values −
true − The range slider is disabled and cannot be interacted with.
false − The range slider is enabled and can be used normally (default value).
Return Value
The property returns a boolean value indicating the current disabled state of the range input element.
Example − Disabling a Range Slider
Following example demonstrates how to disable a range slider using the disabled property −
<!DOCTYPE html>
<html>
<head>
<title>Input Range Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Slider Control</h2>
<form>
<label for="volumeRange">Volume: </label>
<input type="range" id="volumeRange" name="volume" min="0" max="100" value="50">
<span id="volumeValue">50</span>
</form>
<p>Click the buttons below to disable or enable the range slider:</p>
<button type="button" onclick="disableRange()">Disable Slider</button>
<button type="button" onclick="enableRange()">Enable Slider</button>
<p id="status">Range slider is currently enabled.</p>
<script>
const rangeSlider = document.getElementById("volumeRange");
const volumeDisplay = document.getElementById("volumeValue");
const statusDisplay = document.getElementById("status");
// Update volume display when slider moves
rangeSlider.addEventListener("input", function() {
volumeDisplay.textContent = this.value;
});
function disableRange() {
rangeSlider.disabled = true;
statusDisplay.innerHTML = "Range slider is now disabled and greyed out.";
}
function enableRange() {
rangeSlider.disabled = false;
statusDisplay.innerHTML = "Range slider is now enabled and interactive.";
}
</script>
</body>
</html>
The output shows an interactive range slider that can be disabled or enabled −
Volume: [====?====] 50 Click the buttons below to disable or enable the range slider: [Disable Slider] [Enable Slider] Range slider is currently enabled.
Example − Checking Disabled State
Following example shows how to check if a range slider is currently disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Range Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Slider State Checker</h2>
<input type="range" id="testRange" min="1" max="10" value="5" disabled>
<p>This range slider is initially disabled.</p>
<button onclick="checkState()">Check Slider State</button>
<button onclick="toggleState()">Toggle State</button>
<p id="stateResult"></p>
<script>
function checkState() {
const slider = document.getElementById("testRange");
const isDisabled = slider.disabled;
const result = document.getElementById("stateResult");
result.innerHTML = `Slider is currently: ${isDisabled ? 'DISABLED' : 'ENABLED'}`;
}
function toggleState() {
const slider = document.getElementById("testRange");
slider.disabled = !slider.disabled;
checkState(); // Update display
}
</script>
</body>
</html>
This example demonstrates reading the disabled property and toggling the state dynamically −
[=====?=====] (greyed out initially) This range slider is initially disabled. [Check Slider State] [Toggle State] Slider is currently: DISABLED
Example − Form Validation with Disabled Range
Following example shows how disabled range inputs affect form submission −
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Settings Form</h2>
<form id="settingsForm">
<div style="margin: 10px 0;">
<label>Brightness: </label>
<input type="range" id="brightness" name="brightness" min="0" max="100" value="75">
<span id="brightnessValue">75</span>
</div>
<div style="margin: 10px 0;">
<label>Contrast: </label>
<input type="range" id="contrast" name="contrast" min="0" max="100" value="50" disabled>
<span id="contrastValue">50 (disabled)</span>
</div>
<button type="button" onclick="submitForm()">Get Form Data</button>
</form>
<p id="formData"></p>
<script>
function submitForm() {
const form = document.getElementById("settingsForm");
const formData = new FormData(form);
const result = document.getElementById("formData");
let output = "Form Data: ";
for (let [key, value] of formData.entries()) {
output += `${key}=${value} `;
}
result.innerHTML = output || "No enabled form data found.";
}
</script>
</body>
</html>
Note that disabled range inputs are not included in form submissions −
Brightness: [======?===] 75 Contrast: [====?====] 50 (disabled - greyed out) [Get Form Data] Form Data: brightness=75
Key Points
Disabled range sliders are visually greyed out and unresponsive to mouse and keyboard input.
The
disabledproperty can be dynamically changed using JavaScript.Disabled form elements are not included in form submissions or
FormDataobjects.The property returns a boolean value when accessed.
Screen readers typically announce disabled form controls differently to users.
Browser Compatibility
The disabled property for HTML range inputs is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It works consistently across desktop and mobile platforms.
Conclusion
The HTML DOM Input Range disabled property provides an effective way to control the availability of range sliders in web forms. By setting this boolean property to true or false, developers can dynamically enable or disable range controls based on user interactions or application state.
2K+ Views
