CSS-only Custom Range Slider with Motion

Recording of Temani’s demo


I love this demo by Temani Afif. As you drag the thumb of the range input, the tooltip updates. It’s a combination of @property, counters, anchoring, and scroll-driven animations.

See the Pen CSS-only Custom range slider by Temani Afif (@t_afif) on CodePen.

Cranking it up a noth, Temani also incorporated my approach to a CSS-only scroll velocity detection to make the tooltip jiggle as you drag the thumb across.

See the Pen CSS-only Custom range slider with motion by Temani Afif (@t_afif)on CodePen.

Love it! 😍

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


  1. Looks amazing. However I’m getting rendering glitches, and no tooltips in Firefox 126.0.1

    1. At the time of posting this, this demo only works in Chromium-based browsers.

      – Firefox only has experimental support for Scroll-Driven Animations and they haven’t shipped @property yet.

      – While Safari does have @property support, it lacks support for Scroll-Driven Animations.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.