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 type property
The HTML DOM Input Range type property is associated with input elements having type="range". This property returns the string "range" for range input elements, confirming their input type programmatically.
The range input type creates a slider control that allows users to select a numeric value within a specified range. The type property helps identify and validate that an input element is indeed a range slider.
Syntax
Following is the syntax for accessing the type property of a range input element −
rangeObject.type
Return Value
The type property returns a string value "range" for input elements with type="range".
Example − Getting Range Input Type
Following example demonstrates how to retrieve the type property of a range input element −
<!DOCTYPE html>
<html>
<head>
<title>Range Input Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Range Type Property</h2>
<form>
<label for="volume">Volume:</label>
<input type="range" id="RANGE1" name="volume" min="0" max="100" value="50">
</form>
<p>Click the button below to get the input element type:</p>
<button type="button" onclick="rangeType()">Get Type</button>
<p id="result"></p>
<script>
function rangeType() {
var inputType = document.getElementById("RANGE1").type;
document.getElementById("result").innerHTML = "The type for the input field is: " + inputType;
}
</script>
</body>
</html>
The output displays a volume slider. Clicking the "Get Type" button shows the input type −
Input Range Type Property Volume: [====|====] (slider at middle position) Click the button below to get the input element type: [Get Type] After clicking: The type for the input field is: range
Example − Validating Multiple Input Types
Following example shows how to differentiate between different input types using the type property −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Types Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Input Types</h2>
<form>
<p>Text: <input type="text" id="textInput" placeholder="Enter text"></p>
<p>Range: <input type="range" id="rangeInput" min="0" max="100"></p>
<p>Number: <input type="number" id="numberInput" min="1" max="10"></p>
</form>
<button onclick="checkTypes()">Check All Types</button>
<div id="output"></div>
<script>
function checkTypes() {
var textType = document.getElementById("textInput").type;
var rangeType = document.getElementById("rangeInput").type;
var numberType = document.getElementById("numberInput").type;
document.getElementById("output").innerHTML =
"<p><strong>Input Types:</strong></p>" +
"<p>Text input type: " + textType + "</p>" +
"<p>Range input type: " + rangeType + "</p>" +
"<p>Number input type: " + numberType + "</p>";
}
</script>
</body>
</html>
This example demonstrates that each input element returns its corresponding type string −
Different Input Types Text: [____________] Range: [====|====] Number: [ 5 ] [Check All Types] After clicking: Input Types: Text input type: text Range input type: range Number input type: number
Example − Conditional Logic Based on Type
Following example shows how to use the type property for conditional logic in form handling −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Logic with Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Validation Example</h2>
<form>
<p>Volume: <input type="range" id="volumeSlider" min="0" max="100" value="75"></p>
<p>Brightness: <input type="range" id="brightnessSlider" min="0" max="100" value="60"></p>
</form>
<button onclick="processInputs()">Process Inputs</button>
<p id="feedback"></p>
<script>
function processInputs() {
var volume = document.getElementById("volumeSlider");
var brightness = document.getElementById("brightnessSlider");
var feedback = "";
if (volume.type === "range") {
feedback += "Volume slider value: " + volume.value + "<br>";
}
if (brightness.type === "range") {
feedback += "Brightness slider value: " + brightness.value + "<br>";
}
document.getElementById("feedback").innerHTML = feedback;
}
</script>
</body>
</html>
The script checks if inputs are range type before processing their values −
Form Validation Example Volume: [======|==] Brightness: [=====|===] [Process Inputs] After clicking: Volume slider value: 75 Brightness slider value: 60
Key Points
The type property is read-only and cannot be changed after the element is created.
For range inputs, the type property always returns the string
"range".This property is useful for form validation and conditional logic in JavaScript.
The type property helps distinguish between different input types programmatically.
Conclusion
The HTML DOM Input Range type property returns the string "range" for range input elements. This property is essential for form validation, conditional processing, and ensuring that JavaScript code correctly identifies and handles range slider inputs.
198 Views
