Input range slider CSS styler across browsers

Style <input> range sliders CSS across browsers!
Use convenient controls, or edit CSS properties directly. CSS property inputs indicate when the value is
You'll figure it out, I believe in you!

This styler is kinda tested in Chrome and Firefox (end of 2020), and Safari 13 (OS X 10.15). It even kinda works in the old Edge (not the Chromium based).
It does not work in IE though.

Read this great article if you want to know how <input> range CSS styling works under the hood.
It's a shame that in 2020 styling of sliders is not yet standardized. Here is a proposal for standardization that I know of.

Go to the explanation below for more details.

Examples: (gray border indicates edges of <input> elements)

Without styling:




Styled sliders:
use class="styled-slider"
Styled sliders with progress:
use class="styled-slider slider-progress"

<input> element itself

Set to desired height, e.g. slightly larger than the largest height of handle and track.
Otherwise set to zero or empty value to keep the default height defined by browser.
Focus outline for customized slider appearance generally looks ugly.
One way to make it work is to set <input> element height (above) greater than the height of the handle.

See explanation below how to make it work.
CSS: download
JS for progress tracking: download 
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
  e.style.setProperty('--value', e.value);
  e.style.setProperty('--min', e.min == '' ? '0' : e.min);
  e.style.setProperty('--max', e.max == '' ? '100' : e.max);
  e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
Be sure to add the script to your page as explained below.

Some more details

For progress indication to work, you need to add a script to your page, see above. You can dowload, put it into your assets, and add it as external script: 

<script src="range-input.js"></script>

or just copy-paste the contents right inside a <script> element.
The idea is borrowed from this great article.

TODO: figure out how to neatly display focus outline. Currently it looks ugly as fuck in general, that's why it is disabled by default.

Handle may be one pixel off center with respect to track. You'll have to wangjangle with it a bit.
Handles are represented with an HTML element (like <div> or something), apparently elements don't like to be at fractional coordinates.

border-box sizing model is used for handle and track, i.e. specified width and height are generally what you get regardless of the border width. (Unless border is dummy thick, but then jokes on you!)

View source code on GitHub (Not recommended for sanity sake.) ｜ Color picker by Simonwep ｜ External Link icon by Icons8
These links will open in new tabs.