CSS ::-ms-fill-lower Polyfill In Pure JavaScript

Preview:

Description:

A simple, small vanilla JavaScript polyfill for the CSS ::-ms-fill-lower pseudo-element in browsers that do not currently support it.

The ::-ms-fill-lower CSS pseudo-element represents the portion of the “track” (the groove in which the indicator aka thumb slides) of an <input> of type=”range”, which corresponds to values lower than the value currently selected by the thumb. Learn More.

How to use it:

The Polyfill works on HTML5 range input like this:

<input type="range" min="0" max="10" value="10">

Include the main JavaScript file on your webpage when needed.

<script src="script.min.js"></script>