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 Meter value Property
The HTML DOM Meter value property returns or sets the current value of a <meter> element. This property corresponds to the value attribute and represents the actual measurement within the defined range. The <meter> element should be used as a gauge to display scalar measurements within a known range, not as a progress bar.
Note: The <meter> element is specifically designed for displaying measurements like disk usage, temperature, or scores. For progress indicators, use the <progress> element instead.
Syntax
Following is the syntax to get the value property −
meterElementObject.value
Following is the syntax to set the value property −
meterElementObject.value = number
Parameters
number − A floating-point number representing the current value. This should be between the
minandmaxvalues of the meter element.
Return Value
The property returns a number representing the current value of the meter element.
Example − Basic Meter Value Manipulation
Following example demonstrates how to get and set the value property of a meter element −
<!DOCTYPE html>
<html>
<head>
<title>Meter Value Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.meter-container {
margin: 20px 0;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
margin: 5px;
padding: 8px 16px;
border-radius: 5px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h2>Meter Value Property Example</h2>
<div class="meter-container">
<label for="healthMeter">Health Status: </label>
<meter id="healthMeter" min="0" max="100" low="30" high="80" value="65">65%</meter>
<br><br>
<button onclick="getValue()">Get Current Value</button>
<button onclick="setValue(25)">Set Low (25)</button>
<button onclick="setValue(85)">Set High (85)</button>
<button onclick="setValue(50)">Set Normal (50)</button>
</div>
<div id="result">Current value: 65</div>
<script>
function getValue() {
var meter = document.getElementById("healthMeter");
var currentValue = meter.value;
document.getElementById("result").textContent = "Current value: " + currentValue;
}
function setValue(newValue) {
var meter = document.getElementById("healthMeter");
var oldValue = meter.value;
meter.value = newValue;
document.getElementById("result").textContent =
"Value changed from " + oldValue + " to " + newValue;
}
</script>
</body>
</html>
The meter displays different colors based on the value: green for normal range, yellow for low/high thresholds, and red for critical values. Clicking the buttons demonstrates getting and setting the value property.
Health Status: [====65====] Current value: 65 (Clicking "Set Low (25)" shows: Value changed from 65 to 25) (Clicking "Get Current Value" shows: Current value: 25)
Example − Dynamic Meter with Multiple Attributes
Following example shows how the value property works with other meter attributes like min, max, low, and high −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Meter Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.meter-group {
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
}
meter {
width: 200px;
height: 20px;
}
input {
width: 60px;
padding: 4px;
margin: 0 5px;
}
</style>
</head>
<body>
<h2>Server Performance Monitor</h2>
<div class="meter-group">
<label>CPU Usage: </label>
<meter id="cpuMeter" min="0" max="100" low="20" high="80" value="45"></meter>
<span id="cpuValue">45%</span>
</div>
<div class="meter-group">
<label>Memory Usage: </label>
<meter id="memoryMeter" min="0" max="16" low="2" high="12" value="8"></meter>
<span id="memoryValue">8 GB</span>
</div>
<div class="meter-group">
<label>Set CPU Value: </label>
<input type="number" id="cpuInput" min="0" max="100" value="45">
<button onclick="updateCPU()">Update</button>
<button onclick="simulateLoad()">Simulate Load</button>
</div>
<script>
function updateCPU() {
var inputValue = document.getElementById("cpuInput").value;
var cpuMeter = document.getElementById("cpuMeter");
var cpuValueSpan = document.getElementById("cpuValue");
cpuMeter.value = inputValue;
cpuValueSpan.textContent = inputValue + "%";
}
function simulateLoad() {
var cpuMeter = document.getElementById("cpuMeter");
var cpuValueSpan = document.getElementById("cpuValue");
var memoryMeter = document.getElementById("memoryMeter");
var memoryValueSpan = document.getElementById("memoryValue");
// Simulate random server load
var randomCPU = Math.floor(Math.random() * 100);
var randomMemory = Math.floor(Math.random() * 16);
cpuMeter.value = randomCPU;
cpuValueSpan.textContent = randomCPU + "%";
memoryMeter.value = randomMemory;
memoryValueSpan.textContent = randomMemory + " GB";
document.getElementById("cpuInput").value = randomCPU;
}
</script>
</body>
</html>
This example demonstrates practical usage of the meter value property in a server monitoring dashboard. The meter colors automatically change based on the thresholds defined by low and high attributes.
Server Performance Monitor CPU Usage: [====45====] 45% Memory Usage: [====8====] 8 GB Set CPU Value: [45] [Update] [Simulate Load] (Clicking "Simulate Load" updates both meters with random values)
Key Points
The
valueproperty accepts any number, but it's typically constrained by theminandmaxattributes.When the value falls below the
lowthreshold or above thehighthreshold, browsers may display the meter in different colors.Setting a value outside the min/max range is allowed, but the meter visualization will clip to the defined range.
The meter element provides semantic meaning for measurements, making it accessible to screen readers.
Always provide fallback text content inside the
<meter>tags for browsers that don't support the element.
Conclusion
The HTML DOM Meter value property provides a simple way to get and set the current measurement value of a meter element. Combined with the min, max, low, and high attributes, it creates an effective visual gauge for displaying scalar measurements like progress, scores, or system metrics.
175 Views
