Basic stars-rating Demo

Demo 1

      <stars-rating numstars="8" rating="6"></stars-rating>
      

---

Demo 2 - stars size 0.5em

        <stars-rating numstars="12" rating="8" star-size="0.5em"></stars-rating>  
      

---

Demo 3 - Customized emoji

        <style>
          #emoji {
            --start-unicode: '❤️';
            --star-size: 0.5em;
          }
        </style>
        <stars-rating id="emoji" numstars="8" rating="6"<>/stars-rating>
      

---

Demo 4 - Click in star to vote a rating with binding and reset option (ø)

        <p>Your rating: <span id="yourRating"></span></p>
        <stars-rating id="demo6" numstars="5" manual resetbtn></stars-rating>
        <script>
          var el = document.querySelector("#demo6");
          el.addEventListener('rating-changed', function(ev) {
            document.querySelector("#yourRating").innerText = ev.detail;
          })
          </script>
      

Your rating:

---

Demo 5 - Click in a flame to vote a rating with by default value

          <style>
            #emoji2  {
              --start-unicode: '🔥';
            }
          </style>
          <stars-rating id="emoji2" numstars="5" rating="3" manual<>/stars-rating> 
      

---