shaf-star-rating

Accessible star rating element. Upgrades <input type="number" />

Usage no npm install needed!

<script type="module">
  import shafStarRating from 'https://cdn.skypack.dev/shaf-star-rating';
</script>

README

It's easy peasy

Keyboard accessible. Check out the demo. Works in IE11, Edge, Chrome, Firefox, and Safari.

<!-- Custom Elements v1 polyfill (2.7KB gzipped) -->
<script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-alpha.3"></script>

<!-- Our custom element's source (19.8KB, 6.5KB gzipped) -->
<script src="https://unpkg.com/shaf-star-rating@1.0.14"></script>

Usage

<shaf-star-rating>
  <input type="number" min="1" max="5" step="1" value="3" />
</shaf-star-rating>

Benefits

Because this wraps an existing <input type="number" />:

It is form-friendly.
It doesn't mess with your event handlers.

See also