Features
- Scales with font size
- Use emoji or custom icons
- Styleable bar and inactive part
- Uses
ElementInternals
for accessibiity - Ultra light (3KB unminified and uncompressed!)
Examples
No attributes
<meter-discrete></meter-discrete>
Without specifying icon
<meter-discrete max="5" value="2.5"></meter-discrete>
With custom icon, and a max of 10
<meter-discrete max="10" value="6.6" icon="❤️"></meter-discrete>
With step
<meter-discrete max="10" value="6.6" step="0.5" icon="❤️"></meter-discrete>
Dynamic value
<meter-discrete max="5" value="3.5" icon="💩"></meter-discrete>
<button onclick="this.previousElementSibling.value = Math.random() * 5">Random value</button>
Different styles
<style>
#minimal_rating {
font-size: 200%;
}
#minimal_rating::part(value),
#minimal_rating::part(inactive) {
filter: contrast(0%) sepia() hue-rotate(140deg);
}
#minimal_rating::part(inactive) {
opacity: .5;
}
</style>
<meter-discrete id="minimal_rating" max="5" value="2.5" icon="💜"></meter-discrete>
Actual image instead of emoji:
<meter-discrete value="3.5" icon="../logo.svg"></meter-discrete>
See also
<nd-rating>
, an editable version of<meter-discrete>