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

Category: Form , Javascript | April 25, 2017
Views Total:867 views
Official Page:Go to website
Last Update:April 25, 2017


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


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>

You Might Be Interested In:

Leave a Reply