~
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! 😍
Looks amazing. However I’m getting rendering glitches, and no tooltips in Firefox 126.0.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
@propertyyet.– While Safari does have
@propertysupport, it lacks support for Scroll-Driven Animations.