Custom range input progress fill

Roman Komarov forked a demo of mine the other day and showed how CSS scroll driven animation could map the input[type=range] slider's thumb pseudo element position and use it to power a percentage in a gradient mask. Roman explains it all very well here on their blog . See the Pen by Adam Argyle ( @argyleink ) on CodePen . It's super rad . And totally triggered 2 ideas… FORK THE FORK!!! # The first idea I was able to finish tonight, and the 2nd I'll do sometime soon. Ssssecretssss Here's my fork of their fork, repurposed their mapping to power the fill of a range slider. A task that's not so easy. See the Pen by Adam Argyle ( @argyleink ) on CodePen . I left a good chunk of comments in there! While this may not have great support at the moment, and is quite a little web of CSS to setup… it's a very promising path forward for styling input[type=range] and other components with moveable parts . I'll be stashing this into my CSS tricks 🪦