RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
A slider input half filled with a vibrant gradient.
A series of images of an avatar doing a bunch of skateboard tricks.

Custom range input progress fill

2 min read

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.

It's super rad. And totally triggered 2 ideas…


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.

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 🪦

Mentions #

Join the conversation on

  • Ronan Limon Duparcmeur
  • Roma Komarov
  • Abraham Samma
  • Tamas
  • Ken Kenday :confusedlucy:​:rebeccaangry:​
  • Thomas Steiner :chrome:
  • Brett Peary
  • Adam Argyle
  • David Zaslavsky
  • El Dado Inquieto
  • Roni Laukkarinen
  • Jonathan Dallas
  • James J Malcolm
  • Jack Iakovenko
  • Carol McKay (she / her)
1 pingbacks

@argyleink A sidenote: for some reason, for me, there is a difference between how the gradient looks in regular Chrome (on the left, same as your screenshot), and in Canary (on the right)

Roma KomarovRoma Komarov

Crawl the CSS Webring?

previous sitenext site
a random site