JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<span class="item-rating">
  <span class="rating__dynamic">Рейтинг: 1</span>
  <input class="rating__value" type="range" name="rating" value="1" min="0" max="5" step="1">
</span>

<span class="item-rating">
  <span class="rating__dynamic">Рейтинг: 2</span>
  <input class="rating__value" type="range" name="rating" value="2" min="0" max="5" step="1">
</span>

<span class="item-rating">
  <span class="rating__dynamic">Рейтинг: 3</span>
  <input class="rating__value" type="range" name="rating" value="3" min="0" max="5" step="1">
</span>

<span class="item-rating">
  <span class="rating__dynamic">Рейтинг: 4</span>
  <input class="rating__value" type="range" name="rating" value="4" min="0" max="5" step="1">
</span>

<span class="item-rating">
  <span class="rating__dynamic">Рейтинг: 5</span>
  <input class="rating__value" type="range" name="rating" value="5" min="0" max="5" step="1">
</span>

SCSS

.item-rating {
      input[type="range"] {
        // display: none;
      }
    }

    .rating__dynamic {
      display: flex;
      align-items: center;
      font-family: monospace;

      .char {
        display: inline-block;
        width: 15.67px;
        height: 15px;
        margin-right: 5.33px;
        text-align: center;
      }
    }

JavaScript

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('rating__value')) {
    const value = +t.value;
    const stars = t.closest('.item-rating').querySelector('.rating__dynamic');
    stars.innerText = [...Array(5)].map((n, i) => i < value ? '★' : '☆').join('');
  }
});

document.querySelectorAll('.rating__value').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});