Elastic Drag Slider — Free Spring Physics JS Snippet

Most "springy" sliders on the web fake it with a CSS transition: left 0.3s cubic-bezier(...) that includes a slight overshoot curve. That produces a fixed, identical bounce no matter how the user interacts with it — drag the thumb one pixel or fling it across the whole track, and you get the exact same canned animation. This snippet does something different: it runs an actual spring simulation, every animation frame, driven by the real velocity of the user's drag. Flick the thumb hard and it overshoots further and takes longer to settle; nudge it gently and it barely wobbles. That distinction — physically *simulated* motion versus a pre-baked easing curve — is the entire point of the snippet, and the about text below walks through exactly how the loop works.

The three numbers that define a spring

The whole simulation lives in three variables: position (where the thumb currently is, 0-100), target (where it is being pulled toward), and velocity (how fast position is currently changing). Nothing else is needed to simulate a damped spring. Every animation frame, two forces are computed and summed into an acceleration: springForce = -STIFFNESS * (position - target) — a restoring force proportional to how far the thumb is from its target, always pointing back toward it, exactly like Hooke's law for a physical spring — and dampingForce = -DAMPING * velocity, a force that always opposes the current velocity, bleeding energy out of the system so it does not oscillate forever. velocity += acceleration; position += velocity; is literally Euler integration: update velocity from acceleration, then update position from velocity, once per frame.

Why STIFFNESS and DAMPING are tuned as a pair

STIFFNESS (0.22 here) controls how hard the spring pulls back toward the target — higher values snap back faster but overshoot more violently. DAMPING (0.62) controls how much that overshoot is resisted — too little damping and the thumb oscillates visibly several times before settling (an "underdamped" spring); too much and it never overshoots at all, which defeats the point of an elastic slider (a "critically damped" or "overdamped" spring). These two constants were tuned together by hand until a fast flick produced one clean, visible overshoot and settle rather than a pinball-like wobble — changing one without the other is the most common way to make a spring feel wrong.

Turning drag speed into launch velocity

While the pointer is actively down, the thumb tracks the cursor's position exactly (position = val) rather than lagging behind through the spring — a slider should feel perfectly responsive while you are holding it. But on every pointermove, the code also computes velocity = ((val - lastPointerValue) / dt) * 16, a real speed estimate from how far the value moved divided by how much time passed. That velocity is not used while dragging, but the moment pointerup fires, it becomes the *initial velocity fed into the spring loop* — so a fast flick releases with real carried momentum, producing a bigger overshoot, while a slow, careful drag releases with almost no velocity and barely overshoots at all. This is the key mechanism that makes the spring feel connected to the user's actual gesture rather than generic.

The requestAnimationFrame settle-and-stop loop

tick() runs on requestAnimationFrame, updates the physics, calls render(), and then checks whether the system is close enough to rest (Math.abs(velocity) < SETTLE_EPSILON and Math.abs(position - target) < SETTLE_EPSILON) to stop scheduling itself. This matters for two reasons: it avoids running an animation loop forever after the spring has visually stopped moving, and it snaps position exactly to target on the final frame so floating-point drift never leaves the thumb a fraction of a pixel off from its true value.

Why the fill and thumb are allowed to overshoot past 0-100 visually

render() deliberately clamps the *fill bar width* to 0-100% but lets the *thumb's left position* overshoot slightly past those bounds during the spring's bounce, since a real spring released near either end of the track should be able to visibly push past the edge before springing back — clamping the thumb too aggressively would silently remove the elastic feel exactly where it is most visible.