All Controls/Drag-to-Tilt Slider

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