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

input[type="range"] {
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: 5;
  padding-inline: calc(var(--s)/2);
  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);
}



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