Fill lower part of range control cross-browser - html

Question

For an example, check out this fiddle (not in IE, please).
(You can see a description of the control at this link.)
She uses -ms-fill-lower and -ms-fill-upper to control the color on either side of the thumb, like this:
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
(source: brennaobrien.com)
However, as far as I can tell, the ... ::-ms- ... pseudo-elements only work in IE. In Chrome, the code above seems to have no effect. In Chrome, I just end up with this:
(source: brennaobrien.com)
What can I do to achieve this effect cross-browser?
Thanks!

Answer 1

You can achieve this effect using gradient, look here: http://codepen.io/ryanttb/pen/fHyEJ
For example:
input::-moz-range-track{
background: linear-gradient(90deg,black 50%,grey 50%);
}
Of course you need js as well to change percentage values.

Answer 2

For anyone else finding this - with HTML5 now standard background-size is a great option if you don't want the fading look of a gradient. I've built my ranges around the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp.
So my solution was in css:
.slidecontainer {
display:inline-block;
vertical-align:middle;
width: 60%;
position:relative;
margin:5px 0;
background:url('/images/cyan_back.png') no-repeat left top;
background-size:0 14px;
border-radius:7px;
}
Then with jquery:
$('.slidecontainer').css('background-size',$(this).val()+'% 14px');
I believe this is also a bit more cross browser friendly.