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

3 Comments

  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.