Back to Dictionary
Action Feedback
●●○Customize
Advanced

Elastic Slider Handle

Use Elastic Slider Handle when drag feedback helps control confidence; use a plain input when precision matters more.

Use

Giving range controls tactile drag feedback while preserving a readable value.

Avoid

Avoid it when users need exact numeric precision more than tactile feedback.

Safer Alternative

Progress Bar

Risk Level

High attention

Timing

100-220ms response to value changes; long spring tails make the value feel imprecise.

Easing

Use a damped spring or fast ease-out, never a bouncy loop.

Risk

misleading progressaccessibility sensitive

Live Demo

Volume42%

Drag the handle

What It Is

A slider handle that stretches or springs as the value changes, making range input feel responsive without hiding the exact value.

Decision Guidance

Use Elastic Slider Handle when drag feedback helps control confidence; use a plain input when precision matters more.

Best For

Giving range controls tactile drag feedback while preserving a readable value.

Avoid When

Avoid it when users need exact numeric precision more than tactile feedback.

Timing

100-220ms response to value changes; long spring tails make the value feel imprecise.

Easing

Use a damped spring or fast ease-out, never a bouncy loop.

Risk Tags

misleading progressaccessibility sensitive

Alternatives

Progress BarScale on PressFluid Password Strength Gauge

✓When to Use

  • Volume and brightness controls
  • Pricing or quantity sliders
  • Creative tool controls where drag feedback matters

✕When NOT to Use

  • Precise scientific or financial inputs
  • Dense forms with many sliders
  • Controls where handle motion would obscure the value

Configuration Tips

  • 01Keep the hit target stable even if the visible handle stretches
  • 02Show the numeric value near the control
  • 03Disable spring exaggeration for keyboard changes

You've Seen It In

iOS controlsCreative editorsAudio settings panels

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a range slider where the handle subtly stretches while dragging and snaps back when released. Keep the value label visible and stable.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function ElasticSliderHandle({ value }: { value: number }) {
  return (
    <div className="relative h-3 rounded-full bg-stone-200">
      <div className="absolute h-full rounded-full bg-amber-400" style={{ width: `${value}%` }} />
      <div className="absolute top-1/2 h-8 w-8 -translate-y-1/2 rounded-full bg-stone-950" style={{ left: `${value}%` }} />
    </div>
  );
}

Related Effects

Progress Bar

A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.

Scale on Press

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Fluid Password Strength Gauge

A smooth, interpolating bar that physically stretches and continuously shifts color from red (weak) to yellow (fair) to green (strong) as the user types.