Slider Drag Value
The handle stays under the finger while held, with a value bubble that rises on grab.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Slider Drag Value
*
* The handle sits exactly under the finger while it is held, and the
* value bubble rises out of it on grab. Let go and the handle settles onAbout this pattern
The rule that makes a slider feel connected: while the pointer is down there is no easing at all, because a handle that springs toward the finger reads as lag, not as polish. The spring is kept for the movements the user is not steering — an arrow-key nudge, a click further along the track — where it turns a jump into a travel that can be followed. The handle swells under the grab and the readout bubble rises out of it, translating and fading rather than scaling, since it is a number and numbers deform badly. Arrows, Page keys, Home and End all move it, and the formatted amount goes into aria-valuetext.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
Direct tracking under the finger, with the swell as the only grab feedback.
Related patterns
- Field Reorder DragA row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.
- File Drop Zone ActiveThe dashed outline energizes and the target lifts off the page while a file is held over it.
- OTP Paste FillA pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.