<input type="range" min="0" max="4" value="2" class="rating" style="--val:2" oninput="this.style='--val:'+this.value">

.rating {
  font-size: 3em;
  height: 1em;
  width: 5em;
  border: 0; /* firefox! */
  appearance: none;
  background:
    radial-gradient(circle at 0.1em 50%, #fff calc(0.1em - 2px), #000c calc(0.1em - 1px), #0000 0.1em),
    radial-gradient(circle at calc(100% - 0.5em) 50%, #fff calc(0.5em - 2px), #000c calc(0.5em - 1px), #0000 0.5em);
  padding: 0 0.5em 0 0.1em;
  position: relative;

  &::-webkit-slider-runnable-track {
    height: 100%;
    width: 100%;
    clip-path: polygon(0 calc(50% - 0.1em), 100% 0, 200% 0, 200% 100%, 100% 100%, 0 calc(50% + 0.1em), -100% calc(50% + 0.1em), -100% calc(50% - 0.1em));
    background: 
      radial-gradient(circle at   0% 50%, #fff calc(0.1em - 2px), #000c calc(0.1em - 1px), #0000 0.1em),
      radial-gradient(circle at  25% 50%, #fff calc(0.2em - 2px), #000c calc(0.2em - 1px), #0000 0.2em),
      radial-gradient(circle at  50% 50%, #fff calc(0.3em - 2px), #000c calc(0.3em - 1px), #0000 0.3em),
      radial-gradient(circle at  75% 50%, #fff calc(0.4em - 2px), #000c calc(0.4em - 1px), #0000 0.4em),
      radial-gradient(circle at 100% 50%, #fff calc(0.5em - 2px), #000c calc(0.5em - 1px), #0000 0.5em),
      linear-gradient(175.5deg, #000c calc(30.25% - 1px), #0000 30.25%),
      linear-gradient(-175.5deg, #0000 calc(71% - 1px), #000c 71%),
      linear-gradient(90deg, #eee, #ccc);
  }

  &::-webkit-slider-thumb {
    appearance: none;
    width: 0.2em;
    height: 0.2em;
    background:
      radial-gradient(at 35% 30%, #fff5, #fff0 40%),
      radial-gradient(farthest-side, #0000 80%, #0002 0, #0000 90%);
    background-color: hsl(calc(30deg * var(--val)) 65% 55%);
    position: relative;
    top: 50%;
    transform: translate(calc((var(--val) - 2) * 25%), -50%) scale(calc(var(--val) + 1));
    border-radius: 50%;
    abox-shadow: 0.01em 0em 0.025em #000c;
    box-shadow:
      inset 0 0 0 calc(2px / (var(--val) + 1)) #000c,
      inset 0.25px 0.25px 0.2px #0001,
      inset -0.5px -0.5px 1px #0003,
      inset 0.5px 0.5px 1.5px #fff8;
  }

  &::-moz-range-track {
    height: 100%;
    width: 100%;
    clip-path: polygon(0 calc(50% - 0.1em), 100% 0, 200% 0, 200% 100%, 100% 100%, 0 calc(50% + 0.1em), -100% calc(50% + 0.1em), -100% calc(50% - 0.1em));
    background: 
      radial-gradient(circle at   0% 50%, #fff calc(0.1em - 2px), #000c calc(0.1em - 1px), #0000 0.1em),
      radial-gradient(circle at  25% 50%, #fff calc(0.2em - 2px), #000c calc(0.2em - 1px), #0000 0.2em),
      radial-gradient(circle at  50% 50%, #fff calc(0.3em - 2px), #000c calc(0.3em - 1px), #0000 0.3em),
      radial-gradient(circle at  75% 50%, #fff calc(0.4em - 2px), #000c calc(0.4em - 1px), #0000 0.4em),
      radial-gradient(circle at 100% 50%, #fff calc(0.5em - 2px), #000c calc(0.5em - 1px), #0000 0.5em),
      linear-gradient(175.5deg, #000c calc(30.25% - 1px), #0000 30.25%),
      linear-gradient(-175.5deg, #0000 calc(71% - 1px), #000c 71%),
      linear-gradient(90deg, #eee, #ccc);
  }

  &::-moz-range-thumb {
    appearance: none;
    border: 0; /* firefox */
    width: 0.2em;
    height: 0.2em;
    background:
      radial-gradient(at 35% 30%, #fff5, #fff0 40%),
      radial-gradient(farthest-side, #0000 80%, #0002 0, #0000 90%);
    background-color: hsl(calc(30deg * var(--val)) 65% 55%);
    position: relative;
    top: 50%;
    /* firefox has a different translation!!! */
    transform: translate(calc((var(--val) - 2) * 25%), 0%) scale(calc(var(--val) + 1));
    border-radius: 50%;
    abox-shadow: 0.01em 0em 0.025em #000c;
    box-shadow:
      inset 0 0 0 calc(2px / (var(--val) + 1)) #000c,
      inset 0.25px 0.25px 0.2px #0001,
      inset -0.5px -0.5px 1px #0003,
      inset 0.5px 0.5px 1.5px #fff8;
  }
}

/* demo only */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}