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

const ratingElem = document.querySelector('.rating__dynamic');
  const inputElem = document.querySelector('.rating__value');


  setRating(ratingElem, inputElem.value);
  
  inputElem.addEventListener('input', _ => setRating(ratingElem, inputElem.value));

  function filledArray(N, item) {
    const arr = Array(N).fill(item);
    return arr;
  }

  function setRating(elem, n) {
    const minValue = 0;
    const maxValue = 5;
    const filledImage = '★';
    const emptyImage = '☆';
    n = (n < minValue) ? minValue : n;
    n = (n > maxValue) ? maxValue : n;
    n = Math.trunc(n * 2);
    const filledCount = Math.trunc(n / 2);
    const emptyCount = maxValue - filledCount;
    const ratingArr = [...filledArray(filledCount, filledImage),
      ...filledArray(emptyCount, emptyImage)
    ];
    const rating = '<span class="char">' +
      ratingArr.join('</span><span class="char">') +
      '</span>';
    ratingElem.innerHTML = rating;
  }