A drag is a deliberate confirmation gesture: you can't mash it, and you can see how far you've committed before you let go. The component is one motion value, x, and a track that measures itself.

maxX, how far the thumb can travel, isn't a fixed number. It's trackWidth - thumb - pad × 2, recomputed by a ResizeObserver so the button stays correct if its container resizes.

At the md size that's a 288px track, a 40px thumb, and 4px of pad on each side, so maxX comes out to 240. Everything below uses those numbers.

The fill is a second absolutely-positioned pill, pinned at top/bottom/ left: pad, whose width is derived straight from x:

const fillWidth = useTransform(x, (v) => v + dims.thumb);

At rest (x = 0) the fill's width equals the thumb's width, so it sits exactly under the thumb with no bleed on either side. Drag the thumb 120px right and the fill is 160px wide. It always trails the thumb's trailing edge by exactly pad. The label centered over the track fades out over the first 60% of the travel, so by the time you're most of the way across, the instruction has already gotten out of the way:

const labelOpacity = useTransform(x, [0, Math.max(1, maxX * 0.6)], [1, 0]);

threshold defaults to 0.9: the thumb has to clear 90% of maxX before release counts as a confirm. Everything before that line springs back; everything past it springs the rest of the way home.

Both outcomes use the same spring (stiffness: 500, damping: 40), aimed at different targets. A failed drag springs x back to 0; a confirmed one springs it the rest of the way to maxX, so the last few percent of the gesture finishes itself:

const confirm = () => {
  setStatus("confirmed");
  animate(x, maxX, { type: "spring", stiffness: 500, damping: 40 });
  onConfirm?.();
};

const settleBack = () => {
  animate(
    x,
    0,
    reduce ? { duration: 0.2 } : { type: "spring", stiffness: 500, damping: 40 },
  );
};

reduce, this component's own useReducedMotion() check, swaps that same spring for a flat 0.2s tween on the settle-back path, so a reduced-motion user still gets an instant, legible snap instead of a bounce.

Two Framer Motion drag props shape how the thumb feels under a real finger:

drag={confirmed || disabled ? false : "x"}
dragConstraints={{ left: 0, right: maxX }}
dragElastic={0.04}
dragMomentum={false}

dragElastic={0.04} lets the thumb creep slightly past 0 or maxX under drag pressure, so the track doesn't feel like a hard wall. dragConstraints still clamps the resting range. dragMomentum={false} turns off inertial coasting after release entirely: without it, a fast flick could carry x past the threshold on momentum alone, which would make "past the line" mean something different depending on drag speed instead of drag distance. Distance is the only thing that should decide a confirm.

A measured track, a fill derived from one motion value, a threshold that picks the target for the same spring, and a drag config tuned so distance commits, not speed. Drag it, or press the arrow key.