Range Double Handle
Two handles bound a range and the fill between them tracks both, one-to-one under the pointer and settling on a spring from the keyboard.
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 { useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Range Double Handle
*
* Two handles bound a range and the fill between them tracks both. Under
* the pointer the handles follow one-to-one; from the keyboard they settleAbout this pattern
A two-handle range is the rare control where the right answer is two different motions. Under a finger the handle is written straight to the pointer position with no transition at all, because a handle that lags the touch reads as broken hardware. From the keyboard each arrow press is a discrete jump, so the same handle settles into it on a single damped spring and a held key becomes a glide instead of a stutter. The fill is one bar scaled from its left edge, which keeps both ends on the compositor, and the value bubble rises beside the grabbed handle rather than inside it, so the number it carries is never scaled by the handle swelling underneath.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
Two handles over a histogram, with the selected span filled between them.
Related patterns
- Combobox Filter NarrowTyping fades out the options that no longer match while the survivors slide up.
- 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.
- Currency Input FormatSeparators fade in where they belong as the amount groups itself, and the caret holds its place.