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

input[type="range"] {
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: 5;
  appearance: none;
  cursor: pointer;
}
.svg {
  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);
}
.gradient {
  mask-image:
    conic-gradient(from 162deg at 50% 65%,#000 .1turn,#0000 0),
    conic-gradient(from 18deg  at 21% 55%,#000 .1turn,#0000 0),
    conic-gradient(from 306deg at 79% 55%,#000 .1turn,#0000 0);
  mask-position: 0 calc(.4*var(--s));
  mask-size: var(--s);
}


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