Features
- All features of
<meter-discrete>
, plus: - Uses
ElementInternals
to work like a built-in form element - Keyboard accessible (use arrow keys)
- Ultra light (3KB unminified and uncompressed + another 3KB for
<meter-discrete>
)
Examples
Basic
<nd-rating max="5" value="3.5"></nd-rating>
<button onclick="this.previousElementSibling.readonly = !this.previousElementSibling.readonly">Toggle readonly</button>
With step
<nd-rating max="5" value="3.5" step="0.1" style="font-size: 200%"></nd-rating>
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>
<nd-rating id="minimal_rating" max="5" value="2.5" step="0.5" icon="💜"></nd-rating>
Actual image instead of emoji:
<nd-rating value="3.5" icon="../logo.svg"></nd-rating>
Participates in form submission (requires ElementInternals
support):
<form action="about:blank" target="_blank">
<nd-rating name="myrating"></nd-rating>
<button type=submit>Submit</button>
</form>