Post

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? css-tip.com/shaped-range... 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)

CSS by T. Afif@css-only.dev

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range... Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

19/10/26, 10:16 am18 reposts185 likes

Simon Ziegler

@simon.chameleonui.io

Releasing these pretty things on ChameleonUI.io in a few days. the website is a bit tragic until we update it then.

Simon Ziegler

@simon.chameleonui.io

And here we go! bsky.app/profile/simo...

Simon Ziegler@simon.chameleonui.io

We’re launching Chameleon UI components for Web/JS, React and Blazor. Angular, Vue and Svelte are coming in February. #Blazor #ReactJS chameleonui.io/blog-entries...

chameleonui.ioIntroducing Chameleon - ChameleonChameleon UI - a new Material 3 Expressive web components library for Web/JS, React & Blazor. Angular, Vue & Svelte are coming soon.

Simon Ziegler

@simon.chameleonui.io

Oh - you wanted the dials instead!

@cjaythecreator.bsky.social

CSS has officially reached the stage where it can do everything except center my div

bjkeefe

@bjkeefe.bsky.social

Wow! Slick! I think the bell curve would be especially handy, say, for an intro to stats page.

Jean Carlos Morla · Conditec

@yankeemorla.bsky.social

Me quedo con el arc. Lo bueno de resolverlo en CSS puro es menos JavaScript que mantener y menos puntos de falla en móviles de gama baja, que son muchos en LATAM.

Sandeep Das

@sdas86.bsky.social

is the tooltip value synced to the slider through the scroll-driven animations, or does the number update through a different mechanism? curious how you bind them without js