<input type="range" min="1" value="2" max="5">
<!-- 
    Update the max to change the number of stars 
    but you have to also update the CSS if attr() is not supported 
-->

input[type="range"] {
  --s: 100px; /* control the size*/
  
  --_c: #999 50%,#8FBE00 0;
  height: var(--s);
  aspect-ratio: attr(max type(<integer>));
  padding-inline: calc(var(--s)/2);
  box-sizing: border-box;
  mask: url("https://assets.codepen.io/1480814/butterfly.png") 0/var(--s) var(--_m,);
  appearance: none;
  cursor: pointer;
  clip-path: inset(0); /* needed for Firefox */
}
input[type="range" i]::-webkit-slider-thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),var(--_c))
    fill 0//var(--s) calc(20*var(--s));
  appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),var(--_c))
    fill 0//var(--s) calc(20*var(--s));
  appearance: none;
}
input[type="range"]:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
  --_m:,conic-gradient(from 90deg at 2px 2px,#0000 25%,#000 0) 0 0/calc(100% - 2px) calc(100% - 2px);
}

@supports not (d:attr(d type(*))) {
  input[type="range"] {
    aspect-ratio: 5; /* max */
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: pink;
}