Post

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

with a tiny bit of JavaScript enhancement, take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀 (bonus points for only handling drag when limit exceeds)

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> 👇

8 reposts118 likes