<input type="range" min="1" value="2" max="5">

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

input[type="range"] {
  --s: 100px; /* control the size*/
  
  --min: attr(min type(<number>),1  );
  --max: attr(max type(<number>),100);
  height: var(--s);
  aspect-ratio: var(--max);
  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,);
  background: 
    linear-gradient(90deg,
      hsl(calc(30 + 4*var(--val)) 100% 56%) calc(var(--val)*100%/var(--max)),
      #7b7b7b 0
    );
  appearance: none;
  cursor: pointer;
  /**/
  timeline-scope: --val;
  animation: --val linear both;
  animation-timeline: --val;
  animation-range: entry 100% exit 0%;
  overflow: hidden;
}
@keyframes --val {
  0% {--val: var(--max)}
  to {--val: var(--min)}
}
input[type="range" i]::-webkit-slider-thumb{
  opacity: 0;
  view-timeline: --val inline;
}
input[type="range"]::-moz-range-thumb {
  opacity: 0;
  view-timeline: --val inline;
}
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);
}

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