The low attribute of the HTML <meter> element specifies the upper numerical limit of the lower end.
Definition and Usage
➔ If the current value is between the min and the low, it is considered low and is often displayed with a warning color.
➔ The meter changes color depending on whether the value falls in the "low", "medium", or "high" range, with the optimum value also taken into account.
- min: The minimum value of the range (e.g 0).
- low: Must be greater than min, less than high and max.
- high: Must be greater than low and min, less than max.
- max: The maximum value of the range (e.g 100).
- value: The current value, the color changes based on changes in the current value.
Syntax
//In HTML
<label for="memoryusage">Memory Usage:</label>
<meter id="memoryusage" value="35" min="0" max="100" low="50" high="90">30%</meter>
Memory Usage Value: <span id="mvalue"></span>%
//In JavaScript
<script>
let element = document.querySelector("#memoryusage");
//element.value=45;
//element.setAttribute("low","35")
document.querySelector("#mvalue").textContent = element.value;
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML low attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML low attribute example</h3>
<p>The low attribute specifies the upper numerical limit of the lower end.</p>
<label for="memoryusage">Memory Usage:</label>
<meter id="memoryusage" value="35" min="0" max="100" low="50" high="90">30%</meter>
Memory Usage Value: <span id="mvalue"></span>%
</div>
</body>
<script>
let element = document.querySelector("#memoryusage");
//element.value=45;
//element.setAttribute("low","35")
document.querySelector("#mvalue").textContent = element.value;
</script>
</html>
Click on the "Try it Now" button to see how it works.