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?

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