The HTML high attribute is used with a gauge to specify the high value of that gauge. Use it with max, min, low attributes of gauge to get better results.
Let us see an example of Meter high property −
Example
<!DOCTYPE html>
<html>
<head>
<title>Meter high</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meter-high</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></meter>
<input type="button" onclick="lifeSource()" value="Medi Kit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Life Source at '+paulaLifeSource.value;
function lifeSource(effect){
var paulaLifeSource = document.getElementById("paulaLifeSource");
var Immunity = paulaLifeSource.high;
paulaLifeSource.high = 90;
divDisplay.textContent = 'Immunity increased to '+paulaLifeSource.high+' from '+Immunity;
}
</script>
</body>
</html>This will produce the following output −
1) Before clicking ‘Medi Kit’ button −
2) After clicking ‘Medi Kit’ button −
