<input type="range" min="0" step=".1" max="9.42">

@property --v {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}

input[type="range"] {
  /* don't update the values, I got lazy doing all the math so the values are "magic" */
  --s: 50px; 
  --b: 14px; 
  --m: 0.4;
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  aspect-ratio: 2.9;
  appearance: none;
  --_g:#0000 calc(100% - var(--b) - 1px),#111 calc(100% - var(--b)) 100%, #0000 calc(100% + 1px);
  --_l:50%/var(--b) var(--b) no-repeat radial-gradient(50% 50%,#111 calc(100% - 1px),#0000 calc(100% + 1px));
  --_s:/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
  background:
    calc(-6px + var(--s)/2) var(--_l),
    calc(100% + 6px - var(--s)/2) var(--_l),
    linear-gradient(150deg,#dfddd0 23%,#0000 24%),
    linear-gradient(210deg,#dfddd0 23%,#0000 24%),
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% + var(--s)/2 + var(--b)/2) var(--_s),
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% - var(--s)/2 - var(--b)/2) var(--_s);
  cursor: pointer;
  timeline-scope: --v;
  animation: --v linear both;
  animation-timeline: --v;
  animation-range: entry 100% exit 0%;
  overflow: hidden;
}
@keyframes --v {
  0% {--v: attr(max type(<number>))}
  to {--v: attr(min type(<number>))}
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 
     inset 0 0 2px rgb(254 254 254/.5), 
     0 0 2px 1px #232426;
  background: 
    radial-gradient(#5fa0be calc(var(--b)/3),#0000 var(--b)),
    repeating-conic-gradient(#666,#ddd,#666 25%);
  translate: 0 calc(sin(var(--v))*65%);
  rotate: calc(var(--v)*.15turn);
  view-timeline: --v inline;
}
input[type="range"]:focus-visible {
  outline: 2px solid #000;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #dfddd0; /* there is no real transparency so don't change this color, again I got lazy */
}


@supports (-moz-appearance: none) {
  input {display:none}
  body:before {
    content: "Nothing for you Firefox users. Use Chrome!";
    font: bold 30px system-ui,sans-serif;
  }
}