<span><input type="range" min="1" value="2" max="3" ></span>
<span><input type="range" min=".5" step=".5" value="2.5" max="5" ></span>

input[type="range"] {
  --s: 100px; /* control the size*/
  
  --_s: calc(attr(step type(<number>),1)*var(--s)/2);
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  padding-inline: var(--_s);
  box-sizing: border-box;
  appearance: none;
  cursor: pointer;
  mask-image: 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>");
  mask-size: var(--s);
}
input[type="range" i]::-webkit-slider-thumb{
  width: 1px;
  height: var(--s);
  border-image: linear-gradient(90deg, gold calc(50% + var(--_s)), grey 0) fill 0//0 500px;
  appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: var(--s);
  border-image: linear-gradient(90deg, gold calc(50% + var(--_s)), grey 0) fill 0//0 500px;
  appearance: none;
}

span:has(:focus-visible) {
   outline: 2px solid;
}

@supports not (d:attr(d type(*))) {
  :nth-child(1 of span) input[type="range"] {
    aspect-ratio: 3;
    --_s: calc(var(--s)/2);
  }
  :nth-child(2 of span) input[type="range"]{
    aspect-ratio: 5;
    --_s: calc(var(--s)/4);
  }
}


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