<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter showcase</title>
<style>
meter {
width: 50%;
}
</style>
</head>
<body>
<p>
<button onclick="randomize()">Randomize meters</button>
</p>
<p>Basic meters:</p>
<p>
<meter value="0.5">0.5%<br>50%<br>that is a half</meter>
</p>
<p>
<meter value="4" max="10">4/10</meter>
</p>
<p>
<meter min="1" value="3" max="10">grade 3</meter>
</p>
<p>Meters with values outside <code>low</code> and <code>high</code></p>
<p>
<meter low="4" value="1" max="10"></meter>
</p>
<p>
<meter low="4" high="6" value="9" max="10"></meter>
</p>
<p>Meters with values outside <code>optimum</code></p>
<p>
<meter low="4" high="6" value="9" max="10" optimum="1"></meter>
</p>
<p>Meters with values outside <code>min</code> and <code>max</code></p>
<p>
<meter low="4" value="1" high="5" min="3" max="10" optimum="10"></meter>
</p>
<p>
<meter low="4" value="3" high="5" min="1" max="2" optimum="10"></meter>
</p>
<script>
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomize() {
for (const meter of Array.from(document.querySelectorAll('meter'))) {
meter.value = rand(meter.min * 10, meter.max * 10) / 10;
}
}
</script>
</body>
</html>
