~
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! 😍