Drag-to-Tilt Slider
Must drag container edges to tilt; ball rolls to value.
Tags:sliderphysicstilt
Tech:vanilla-jscssaccelerometer
Live Demo
⚠️ Warning: This is an intentionally terrible UI pattern. Do not use in production applications.
Volume: 50
Test with Music
💃
Dance
0:00 / 0:00
Volume: 50%
🔊 Medium
Drag either end of the bar to tilt it – the ball will (hopefully) roll to your desired volume.
Why This Control Is Terrible
Instead of dragging a normal slider handle, users must grab the edges of the container and physically tilt it like a phone game. A ball inside rolls around based on the tilt angle. The value is whatever the ball happens to roll over. The ball has realistic physics and can get stuck in corners or roll back and forth. There's no direct manipulation - you're at the mercy of virtual gravity.
UX Violations
- Violates user expectations and mental models
- Increases cognitive load and frustration
- May cause accessibility issues
- Breaks established design patterns
- Provides poor feedback and unclear states