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:

Answer 1

At this stage there is still no option for native implementation of -ms-fill-lower or -moz-fill-lower in Chrome. Manipulating the range input element with RangeSlider.js was not an option so I used the tweaking technique with CSS linear Gradients and little bit of javascript to fire css changes on input range thumb movement Hope this helps someone check example on Codepen