The high attribute is used with the HTML <meter> element to specify the upper numerical limit of the high end.
Definition and Usage
➔ This helps visually differentiate colors when the current value falls in the "high" range.
➔ Usually the color of the meter changes from green to yellow or red.
➔ The high value must be greater than the min and low attributes and less than the max attribute value.
➔ high defines the lower limit of the high range, values between high and max are considered high.
➔ The attributes of the meter element are:
- 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="mid">Machine Load:</label>
<meter id="mid" value="45" min="0" max="100" low="40" high="75" optimum="50">
90/100
</meter>
Machine Value: <span id="mvalue"></span>%
//In JavaScript
let element = document.querySelector("#mid");
//element.high=75;
//element.setAttribute("high","75")
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML high 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 high attribute example</h3>
<p>The high attribute value must be greater than low and min, less than max.</p>
<label for="mid">Machine Load:</label>
<meter id="mid" value="45" min="0" max="100" low="40" high="75" optimum="50">
90/100
</meter>
Machine Load Value: <span id="mvalue"></span>%
</div>
</body>
<script>
let element = document.querySelector("#mid");
//element.value=45;
//element.setAttribute("high","75")
document.querySelector("#mvalue").textContent = element.value;
</script>
</html>
Click on the "Try it Now" button to see how it works.