How to make the left side of a range slider a different color than the right side of the slider?

Question

Looking for information on how to change the slider color depending upon what side of the dragable portion it is on, such as how the HTML5 video player slider does.

I've looked around for a bit and haven't found anything for pure JS solutions, only JQUERY, which I can't use. Any suggestions?

Diffuse

Have you tried making a function, so that when it reach a certain point the color changes? ie When slider is 25% it is yellow, when it reach 50% it is red, etc – Boong

I'm specifically looking to have the left side of the slider be red, with the right being gray (as an example). – Diffuse

You will need to hide the input, and have a div that looks like a slider that modifies the actual slider value – Dyche

That's what I was fearing. Thanks! – Diffuse

Actually I was wrong. See my answer. – Dyche

Answer 1

Depending on the design you can achieve this with pure CSS too:

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 20px;
  overflow: hidden;
  width: 400px;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  border-radius: 50%;
  box-shadow: -210px 0 0 200px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1010px 0 0 1000px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
  background-color: #666;
  height: 20px
}
input[type="range"]::-ms-fill-upper {
  background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
  background-color: #666;
}

<input type="range"/>

Using this you'll have to be aware of the input width and matching the box-shadow of the slider-thumb to be more than the width. As the box-shadow around the thumb is what is giving the appearance of different colours either side.

Also as this utilises overflow: hidden on the input you would not be able to have a bigger thumb than track.

Hence if the design is more specific I can also recommend noUISlider it doesn't use jQuery

Turgot

That's closer to what I was looking for, but the problem is I want the thumb to extend over the slider by a few pixels. Overflow hidden removes that, which defeats the purpose. – Diffuse