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 optimum Property
The HTML DOM Meter optimum property gets or sets the optimum value of a <meter> element. This property specifies what value is considered the best or most desirable within the meter's range. The optimum value works together with the high, low, min, and max attributes to determine the meter's visual appearance and semantic meaning.
Note: The <meter> element should be used as a gauge to display scalar measurements within a known range, not as a progress bar. For progress indication, use the <progress> element instead.
Syntax
To get the optimum value −
meterElementObject.optimum
To set the optimum value −
meterElementObject.optimum = number
Parameters
-
number − A floating-point number that represents the optimum value. This value should be within the range defined by the
minandmaxattributes.
Return Value
Returns a floating-point number representing the current optimum value of the meter element.
How the Optimum Value Works
The optimum value affects how browsers interpret and display the meter:
-
If optimum is in the low range (between min and low), lower values are considered better.
-
If optimum is in the medium range (between low and high), medium values are considered better.
-
If optimum is in the high range (between high and max), higher values are considered better.
Example - Getting and Setting Optimum Value
<!DOCTYPE html>
<html>
<head>
<title>Meter Optimum Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.meter-container {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
meter {
width: 300px;
height: 25px;
}
button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 10px 5px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Meter Optimum Property Demo</h2>
<div class="meter-container">
<label for="healthMeter">Health Score (0-100):</label>
<meter id="healthMeter" min="0" max="100" low="30" high="70" optimum="80" value="45"></meter>
<div>
<button onclick="getOptimum()">Get Optimum Value</button>
<button onclick="setOptimumLow()">Set Optimum to 20 (Low)</button>
<button onclick="setOptimumHigh()">Set Optimum to 85 (High)</button>
</div>
<div id="result" class="result">Current optimum: 80</div>
</div>
<script>
const meter = document.getElementById('healthMeter');
const result = document.getElementById('result');
function getOptimum() {
const optimumValue = meter.optimum;
result.textContent = `Current optimum value: ${optimumValue}`;
}
function setOptimumLow() {
const oldOptimum = meter.optimum;
meter.optimum = 20;
result.textContent = `Optimum changed from ${oldOptimum} to ${meter.optimum} (Low range - lower values preferred)`;
}
function setOptimumHigh() {
const oldOptimum = meter.optimum;
meter.optimum = 85;
result.textContent = `Optimum changed from ${oldOptimum} to ${meter.optimum} (High range - higher values preferred)`;
}
</script>
</body>
</html>
The output shows a health score meter with different optimum settings. Notice how the meter's visual appearance changes based on where the optimum value falls within the defined ranges −
Health Score (0-100): [====------] 45/100 [Get Optimum Value] [Set Optimum to 20 (Low)] [Set Optimum to 85 (High)] Current optimum: 80
Example - Battery Level Gauge
<!DOCTYPE html>
<html>
<head>
<title>Battery Level Meter</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.battery-info {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 10px 0;
}
meter {
width: 250px;
height: 20px;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Device Battery Monitor</h2>
<div class="battery-info">
<label for="batteryLevel">Battery Level:</label>
<meter id="batteryLevel" min="0" max="100" low="20" high="80" optimum="90" value="75"></meter>
<p>Current: <span id="currentLevel">75%</span></p>
<p>Optimum Level: <span id="optimumLevel">90%</span></p>
<button onclick="simulateBatteryDrain()">Simulate Battery Drain</button>
<button onclick="updateOptimum()">Change Optimum to 95%</button>
</div>
<script>
const battery = document.getElementById('batteryLevel');
const currentLevel = document.getElementById('currentLevel');
const optimumLevel = document.getElementById('optimumLevel');
function simulateBatteryDrain() {
const newValue = Math.max(0, battery.value - 15);
battery.value = newValue;
currentLevel.textContent = newValue + '%';
}
function updateOptimum() {
battery.optimum = 95;
optimumLevel.textContent = battery.optimum + '%';
}
</script>
</body>
</html>
This example demonstrates a battery level meter where the optimum value represents the ideal battery charge level. The meter's appearance will change as the battery drains and as the optimum level is adjusted.
Key Points
-
The optimum property accepts floating-point numbers and should be within the meter's min-max range.
-
Setting optimum outside the min-max range may cause unexpected behavior in different browsers.
-
The visual appearance of the meter depends on the relationship between the current value, optimum value, and the low/high thresholds.
-
When the optimum value changes, the browser automatically updates the meter's visual styling to reflect the new preference.
Browser Compatibility
The meter element and its optimum property are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the meter element.
Conclusion
The HTML DOM Meter optimum property is essential for creating meaningful gauge displays. By setting the optimum value appropriately within the low, medium, or high ranges, you can indicate whether lower, medium, or higher values are preferred, helping browsers display the meter with appropriate visual cues for users.
143 Views
