Feedback & Interaction · What a tap feels like
Elastic slider弹性滑杆
- stretched by speed
- rounds off at rest
- shows haste
The slider thumb stretches sideways in proportion to how fast it is moving, then rounds back at rest. Drag slowly and it barely deforms; flick it and it stretches into a capsule. The feedback draws the user’s own haste.
When to use it
Use it on continuous controls — media scrubbing, volume, brightness — where it gives the drag a physical feel. Skip it for stepped choices (those want snapping), and skip it on short form sliders: the travel is too small to build any speed, so nothing shows.
Parameters
transform: scaleX 1→1.6 · scaleY 1→0.7 · decay 220ms ease-out · thumb follow 90ms first-order
Recipe
Elastic slider → transform: scaleX 1→1.6 · scaleY 1→0.7 · decay 220ms ease-out · thumb follow 90ms first-order
One sentence for your AI
Build an elastic slider: read the thumb’s current velocity and map it to scaleX (about 1.6 at full speed) and scaleY (about 0.7, holding volume constant), then decay back to 1 over 220ms ease-out. Move the thumb itself with first-order follow (lerp 0.28 per frame), not an easing function — easing makes it lag behind rather than track.