Style input range before and after

Question

I followed this method from CSS-Tricks to create an input style and tried to use pseudo-classes before and after. Below is the code I tried:

input[type=range]::-webkit-slider-thumb:before { background: #fff; } 

This is not like a trick. Can someone help me how to style the slider track. I need a clean CSS solution . Essentially, I want it to look like this.

I will also insert the code from the CSS tricks:

 input[type=range] { -webkit-appearance: none; margin: 18px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -14px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #367ebd; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: #3071a9; } input[type=range]:focus::-ms-fill-upper { background: #367ebd; } 

Answer 1

In Firefox and IE it is possible -

 // Mozilla input[type="range"]::-moz-range-progress { background: #cc1a1a; height: 12px; border-radius: 12px; } // IE input[type="range"]::-ms-fill-lower { background: #CC1A1A; border: 0 solid #000101; border-radius: 50px; box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; } input[type="range"]::-ms-fill-upper { background: #c0c0c0; border: 0 solid #000101; border-radius: 50px; box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; } 

Only one way for Chrome :before and :after no longer supported (since March 2016). The best I've found is http://rangeslider.js.org/ . It also works great with Angular JS - https://github.com/danielcrisp/angular-rangeslider

Answer 2

The delayed response bit is here:

A pure CSS solution is not possible cross-browser here - IE is the only one that makes this possible with ::-ms-fill-lower and ::-ms-fill-upper

For a complete cross-browser solution, you will need to use js. Here's an example that updates CSS gradients with an input value to do roughly what you need: http://codepen.io/ryanttb/pen/fHyEJ

You can also find information about this in this answer to a similar question: HTML5 range lower and upper padding style