Jun 6, 2024

CSS-only Custom Range Slider with Motion

More Front-end Bloggers All from Bram.us View CSS-only Custom Range Slider with Motion on bram.us

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

Scroll to top