CSS by T. Afif @css-only.dev · 29d 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)
509 likes 19 replies
Replies
These sliders look like they could get someone pregnant.
Do that to me and I will 100% believe that there is something happening on the Y axis that isn’t being shown to me.
Thats actually pretty badass
Ahh this pleases the creative side of my brain so much!
I will gladly recommend silly stuff like this to developers so they can decide to be totally silly if the time comes.
Not only did you make the slider less boring, but also less intuitive with introducing an additional, but not explained range in the y-axis. Cool effect, though :)
That's rather cool!
I'm making a pet site right now based around slimes with different silhouettes rendered mathematically in-browser. I experimented with distortion and while it was fun I found it challenging to find a use for it - this is a fun example!
Reminds me of one of my favorite date pickers: midasminnegal.nl/date-picker....
I should get out more. I immediately saw sperms.
Did you take inspiration from the playground in my local park? Pretty sure it has a toy board that looks close to that! 😁
If it's Chrome only, it's not real!
Now deliver the Y position as value 🤣
It was a fantastic slider maybe should use it in Qt project 😸
Love it!
I feel like this could work if the bumps were uniform, like a stylized alternative to slider ticks.
I miss doing CSS tricks. This is super awesome.
No but what if they were based on usage data, the point where the slider dips or rises the most are where the most people have theirs set.
Yea this would be neat as a filter toggle for a data visualization