A creative CSS-only technique for building wiggly/wavy range sliders using the native HTML input element. The effect leverages modern CSS features including border-shape, Scroll-Driven Animations, and @property — no JavaScript or extra HTML elements required. Currently a Chrome-only experience. CSS variables allow easy customization, and the wavy line shape can be generated using a companion wavy divider generator tool.
168.9K Impressions2 Comments