<div class="five-star" style="--rating: 5;">
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
</div>
<input type="range" value="10" min="0" max="10" />

body {
  display: grid;
  height: 100vh;
  place-items: center;
}

.five-star {
  // 変数
  --star-color: #fff;
  --star-fill: #ffd43b;
  --percent: calc(var(--rating) / 5 * 100%);

  // スタイル
  display: flex;
  background: linear-gradient(
    90deg,
    var(--star-fill) var(--percent),
    var(--star-color) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//

input {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #d0ebff;
  height: 12px;
  border-radius: 12px;
  border: 2px solid #d0ebff;
  outline: 0;

  &:focus {
    box-shadow: 0 0 3px rgb(0, 161, 255);
  }

  // -webkit-向けのつまみ
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #4dabf7;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  }

  &::-moz-range-thumb {
    background: #4dabf7;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
    border: none;
  }

  &::-moz-focus-outer {
    border: 0;
  }

  &:active::-webkit-slider-thumb {
    box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
  }
}

const input = document.querySelector("input");
const star = document.querySelector(".five-star");

input.addEventListener("input", (e) => {
  const value = e.target.value / 2;
  star.style.setProperty("--rating", value);
});