Style lower and upper fill in HTML5 range input

Question

As explained here, IE allows styling of the lower and upper fill or track regions in CSS as follows:

/* The following only affects the range input in IE */    input[type="range"]::-ms-fill-lower {    background-color: red;   }    input[type="range"]::-ms-fill-upper {      background-color: blue;  }

<input type="range">

Does anyone know of a way to apply different styles to the upper and lower tracks of a range input in Firefox, Chrome, etc. using CSS or any JS library?

UPDATE:

As pointed out by Wilson F, this is now supported in Firefox:

/* The following only affects the range input in FF */    input[type="range"]::-moz-range-progress {    background-color: red;   }    input[type="range"]::-moz-range-track {      background-color: blue;  }

<input type="range">  

Answer 1

First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSS by Daniel Stern. His idea is to make the input invisible and then apply the custom styles.

He also developed an excellent online tool named randge.css in which you select the style preset and parameters and get auto generated CSS code like the following one:

input[type=range] {    -webkit-appearance: none;    margin: 10px 0;    width: 100%;  }  input[type=range]:focus {    outline: none;  }  input[type=range]::-webkit-slider-runnable-track {    width: 100%;    height: 12.8px;    cursor: pointer;    animate: 0.2s;    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;    background: #ac51b5;    border-radius: 25px;    border: 0px solid #000101;  }  input[type=range]::-webkit-slider-thumb {    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;    border: 0px solid #000000;    height: 20px;    width: 39px;    border-radius: 7px;    background: #65001c;    cursor: pointer;    -webkit-appearance: none;    margin-top: -3.6px;  }  input[type=range]:focus::-webkit-slider-runnable-track {    background: #ac51b5;  }  input[type=range]::-moz-range-track {    width: 100%;    height: 12.8px;    cursor: pointer;    animate: 0.2s;    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;    background: #ac51b5;    border-radius: 25px;    border: 0px solid #000101;  }  input[type=range]::-moz-range-thumb {    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;    border: 0px solid #000000;    height: 20px;    width: 39px;    border-radius: 7px;    background: #65001c;    cursor: pointer;  }  input[type=range]::-ms-track {    width: 100%;    height: 12.8px;    cursor: pointer;    animate: 0.2s;    background: transparent;    border-color: transparent;    border-width: 39px 0;    color: transparent;  }  input[type=range]::-ms-fill-lower {    background: #ac51b5;    border: 0px solid #000101;    border-radius: 50px;    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  }  input[type=range]::-ms-fill-upper {    background: #ac51b5;    border: 0px solid #000101;    border-radius: 50px;    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  }  input[type=range]::-ms-thumb {    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;    border: 0px solid #000000;    height: 20px;    width: 39px;    border-radius: 7px;    background: #65001c;    cursor: pointer;  }  input[type=range]:focus::-ms-fill-lower {    background: #ac51b5;  }  input[type=range]:focus::-ms-fill-upper {    background: #ac51b5;  }    body {    padding: 30px;  }

<input type="range">

Yes, with CSS only it's possible on IE only, but if you don't mind to add some scripting it can be simulated with linear gradient. See the following sample: codepen.io/ryanttb/pen/fHyEJ