RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia 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)

@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

Member of a CSS Webring

Try a site in the ring!