<style>
    .star {
        relative;
        font-size: 2rem;
        color: #ddd;
    }
   
    .star input {
        width: 100%;
        height: 100%;
        absolute;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }
   
    .star span {
        width: 0;
        absolute;
        left: 0;
        color: red;
        overflow: hidden;
        pointer-events: none;
    }
</style>
<>
    const drawStar = (target) => {
        document.querySelector(`.star span`).style.width = `${target.value * 20}%`;
        console.log(target.value)
    }
</>
<body>
    <span class="star">
        ★★★★★
        <span>★★★★★</span>
        <input type="range" oninput="drawStar(this)" value="0.5" step="0.5" min="0" max="5">
      </span>
</body>

평점주기인데 별색이안뜸