Background
The library includes a Meter component. Unfortunately, it seems buggy on both this fork and the original:
The issue seems to be the appearance: none property, which when removed, results in a normal meter.
Proposal
However, Claude AI suggested the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Meter Element Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
meter {
width: 300px;
height: 25px;
margin-bottom: 20px;
border-radius: 12px; /* Added border-radius */
}
meter::-webkit-meter-bar {
background: #e0e0e0;
border: 1px solid #ccc;
border-radius: 12px; /* Match the meter's border-radius */
}
meter::-webkit-meter-optimum-value {
background: #00ff00;
border-radius: 12px; /* Match the meter's border-radius */
}
meter::-webkit-meter-suboptimum-value {
background: #ffff00;
border-radius: 12px; /* Match the meter's border-radius */
}
meter::-webkit-meter-even-less-good-value {
background: #ff0000;
border-radius: 12px; /* Match the meter's border-radius */
}
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Styled Meter Element</h1>
<label for="meter1">Optimum Value (0.7):</label>
<meter id="meter1" value="0.7" min="0" max="1" optimum="0.8" low="0.4" high="0.9"></meter>
<label for="meter2">Suboptimum Value (0.5):</label>
<meter id="meter2" value="0.5" min="0" max="1" optimum="0.8" low="0.4" high="0.9"></meter>
<label for="meter3">Less Good Value (0.2):</label>
<meter id="meter3" value="0.2" min="0" max="1" optimum="0.8" low="0.4" high="0.9"></meter>
</div>
</body>
</html>Which renders nicely:
There is also Firefox styling to be included:
meter {
width: 300px;
height: 25px;
margin-bottom: 20px;
border-radius: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* WebKit/Blink browsers */
meter::-webkit-meter-bar {
background: #e0e0e0;
border: 1px solid #ccc;
border-radius: 12px;
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
border-radius: 12px;
}
/* Firefox */
meter::-moz-meter-bar {
border-radius: 12px;
}
/* Fallback for browsers that don't support custom styling */
meter {
background: #e0e0e0;
border: 1px solid #ccc;
}Notes
Nuxt UI's implementation of a Meter element:
https://ui.nuxt.com/components/meter
FWIW, Nuxt UI's meter does use appearance: none so it appears that maybe it can be made to work.
Note that this implementation does not show colors, so perhaps there could be two meters; a colored, and uncolored.
Background
The library includes a Meter component. Unfortunately, it seems buggy on both this fork and the original:
The issue seems to be the
appearance: noneproperty, which when removed, results in a normal meter.Proposal
However, Claude AI suggested the following HTML:
Which renders nicely:
There is also Firefox styling to be included:
Notes
Nuxt UI's implementation of a Meter element:
https://ui.nuxt.com/components/meter
FWIW, Nuxt UI's meter does use
appearance: noneso it appears that maybe it can be made to work.Note that this implementation does not show colors, so perhaps there could be two meters; a colored, and uncolored.