Lens range

Tab

Moves focus to the minimum thumb, the maximum thumb, then each preset label.

Arrow RightorArrow Up

Raises the focused thumb by one step.

Arrow LeftorArrow Down

Lowers the focused thumb by one step.

Shift+Arrow, Page UporPage Down

Moves the focused thumb by the large step.

HomeorEnd

Moves the focused thumb to its lowest or highest allowed value.

EnterorSpace on a preset

Moves the nearest thumb onto that preset.

• The component is a group named by label. Each thumb is a focusable role="slider" with its own name, aria-valuemin and aria-valuemax that stop at the other thumb, aria-valuenow and a formatted aria-valuetext.
• Preset labels are real buttons named with their label and value, such as Median, €82k, so the detents are reachable without a pointer.
• The ticks, bubbles and stops are decorative and hidden from assistive technology; the sliders carry every value.
• A focused thumb also opens its lens, so keyboard users get the same magnified reading as pointer users. Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring.
• Thumbs never cross, and a detent never pulls a thumb past the other one.

• One requestAnimationFrame loop steps every spring at 240 Hz and writes transforms and opacity straight to the DOM through a cache; it stops at rest, offscreen and in background tabs.
• The lens is a fisheye: each tick is displaced by a Gaussian weighted offset from each thumb, which spreads ticks near it and gathers them further out without ever reordering them, and swells them with a narrower Gaussian. Its strength springs from a quiet resting lens to a stronger one on hover or focus and the strongest while dragging.
• Inside a preset's reach the thumb follows a power curve: it lingers near the preset, the value takes the preset exactly, and it lets go with a small jump at the edge. Catching a preset pulses its label and gives a short vibration on touch devices that support it.
• Each bubble trails its thumb on a slightly underdamped spring while its pointer stays on the thumb, so the tail leans as the thumb moves. Pills are built from two caps and a stretched middle, so a new width springs instead of jumping.
• When the bubbles meet they slide together, a bridge grows between them from the center line and the two values crossfade into one range, then split the same way.
• A press on the scale moves the value under the finger at once while the thumb glides there.
• With reduced motion the thumbs, bubbles and lens jump to their final state, there is no trailing, pulse or glide, and the detents still take the preset values.

• The number of ticks follows the width, about one every 7px, so the scale keeps its density from 320px up.
• Bubbles stay inside the component at either end, and preset labels are nudged apart when they would overlap at narrow widths while their stops stay on the exact values.
• The scale takes the press with touch-action pan-y, so vertical page scroll still works; each thumb has a 44px hit area.

• Each frame writes one transform per tick plus the thumbs and bubble pieces, all compositor friendly; nothing relayouts while dragging.
• Text widths are read only when a bubble's text changes, label widths only on resize.
• The loop idles at rest and pauses offscreen with an IntersectionObserver and in background tabs.

• Choose it for a range where reference points matter, such as a salary band against market data, a budget against plan limits or a price against competitor prices. Two to four presets read best.
• Pass format for units; keep formatted values short, like €82k, because they sit in bubbles above the thumbs.
• Preset values do not need to sit on a step; a held thumb takes the preset value exactly.
• Put network requests in onValueCommit. Changing format, for example between yearly and monthly amounts, updates the bubbles and their widths spring to fit.

The full library index for assistants is at /llms.txt.