html range: change track color to multiple colors

I am trying to achieve this:

enter image description here

Its a slider with a track with multiple ranges. 30% grey, 30% blue, 30% grey again.

I tried:

background: linear-gradient(to right, grey 33%, #82CFD0 33%, #grey 100%);

But the results are never what I want.

How would you go on about this?

>Solution :

This should do the trick:

  appearance: none; /* needed to overwrite default styling*/
  background: linear-gradient(to right, grey 33%, #82CFD0 33%, #82CFD0

You set the beginning of the next value right onto the end of the previous one, so you don’t have a gradient in between the colors.

.slider {
  appearance: none;
  background: linear-gradient(to right, grey 33%, #82CFD0 33%, #82CFD0 66%, grey 66%, grey 100%);
  height: 8px;
  border-radius: 12px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #82ced0;
  cursor: pointer;
}
<input type="range" class="slider" >

Leave a Reply