Post

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

CSS only balance slider ☕️ the trick: a scroll-driven animation on the [type=range] thumb that updates custom property values which are then used in a counter for the labels and to style the bar (few lines of JavaScript to "polyfill" it) video reveals the <input> 👇

6 reposts86 likes

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

figured may as well repost it here seein' as others elsewhere are reposting the implementation as theirs 💀 updated to include the <input> reveal 🤙 and if you like this sort of thing, sign up for "The Craft of UI", where we break down things like this craftofui.substack.com

craftofui.substack.comThe Craft of UI | Jhey ʕ•ᴥ•ʔ | SubstackShowing you how to bring ideas to life with code 🤙. Click to read The Craft of UI, by Jhey ʕ•ᴥ•ʔ, a Substack publication.