<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%,#FE4365 0;
  height: var(--s);
  aspect-ratio: attr(max type(<integer>));
  padding-inline: calc(var(--s)/2);
  box-sizing: border-box;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -28 540 512'><path d='M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 0 0 256 455.516a30.03 30.03 0 0 0 19.785-7.43c20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0'></path></svg>") 0/var(--s) var(--_m,);
  appearance: none;
  cursor: pointer;
}
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: lightblue;
}