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

input[type=range] {
  --s: 50px; /* the size of the bar (including the gap) */
  --g: 30%;  /* the gap (percentage of the above size) */
  
  --_c: #D9CEB2 50%,#3FB8AF 0; /* the colors (don't touch the percentage!) */
  --_n: attr(max type(<integer>)); /* update max to control the number of bars */
  aspect-ratio: 3/2; /* you can update this as well */
  width: calc(var(--_n)*var(--s));
  padding-inline: calc(var(--s)/2);
  box-sizing: border-box;
  mask: var(--_m,)
    linear-gradient(90deg,#0000 calc(var(--g)/2),#000 0 calc(100% - var(--g)/2),#0000 0) 
     0/var(--s) intersect,
    linear-gradient(to top left,#000 50%,#0000 0),
    linear-gradient(to top left,#000 calc(50% + 50%/var(--_n)),#0000 0) intersect,
    repeating-conic-gradient(#000 0 25%,#0000 0 50%)
     0 100%/calc(200%/var(--_n)) calc(200%/var(--_n));
  appearance: none;
  cursor: pointer;
}
input[type="range" i]::-webkit-slider-thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),var(--_c))
    fill 0//400px calc(var(--_n)*var(--s));
  appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),var(--_c))
    fill 0//400px calc(var(--_n)*var(--s));
  appearance: none;
}
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),;
}

/* update the value manually until better support for attr() */
@supports not (d:attr(d type(*))) {
  input[type="range"] {
    --_n: 5;
  }
}

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