advantages

• framework agnostic
• 4kb(min, gzip)
• accessibility
• keyboard usage
• dynamic properties
• customizable css

demos/examples

• Plunker
• Codesandbox
• Github

installation (npm):

npm install waxwing-rating

import WW_Rating from "waxwing-rating";
import "waxwing-rating/dist/waxwing-rating.css";

installation (es5 style / script):

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/waxwing-rating.css">
<script src="https://unpkg.com/[email protected]/dist/waxwing-rating.min.js"></script>

usage

<div id="container" class="rating-container"></div>

const rating = new WW_Rating({
  target: document.querySelector("#container"),
  props: {
    title: "Rate your health",
    name: "health",
    icon: "star",
    value: 3,
    items: [
      {
        value: 1,
        text: "very bad"
      },
      {
        value: 2,
        text: "bad"
      },
      {
        value: 3,
        text: "normal"
      },
      {
        value: 4,
        text: "good"
      },
      {
        value: 5,
        text: "exelent"
      }
    ]
  }
});

rating.title = "My New Title";

console.log(rating.value);

styles

you could override all styles via the css. For example:

.rating-container .ww-rating--focus {
  border-color: tomato;
}
.rating-container .ww-rating__title--focus {
  color: tomato;
} 
.rating-container .ww-rating__input:checked + .ww-rating__star svg {
  fill: tomato;
}
.rating-container .ww-rating__star:hover svg {
  stroke: gold;
}

how to build

• git clone https://github.com/dmitrykurmanov/waxwing-rating.git
• npm install
• npm start
• npm test

Thanks to

SvelteJS
RollupJS
AvaJS
and Vadim Makeev