<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: #7b7b7b 50%,#fff220 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='0 0 100 100'><path d='M50 5 L79 95 L2 40 L98 40 L21 95 Z'/></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;
}