{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slider", "type": "registry:ui", "title": "Slider", "description": "A value on a range, such as an animation speed, or a span with two thumbs, such as builds that took 20s to 80s. A thin rail, a foreground range and round thumbs that follow the pointer one to one, with words for the two ends. The thumbs of a range never cross, and a form sends both values under one name.", "dependencies": [ "@radix-ui/react-slider" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "files": [ { "path": "registry/litt/ui/slider.tsx", "type": "registry:ui", "content": "\"use client\";\n// @litt/slider 2026.11.09. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * Slider (components.md, \"Slider\"): one value on a continuous range, such as the default\n * animation speed. Built on Radix Slider (one thumb), which gives the role, the keys and the\n * form value. litt owns the look, the hand, the label row and the end words. RangeSlider, in the\n * same file, is the same control with two caps for a span (see \"Range\" below).\n *\n * - The post (material.md, 6; Nick's frames 119 and 121, made physical on the controls canvas, v1.0): a raised plate\n * the control's height (44, md) at the control radius (--litt-block, --litt-plate-lift); a slot cut into it (--litt-slot,\n * --litt-slot-shade: its top wall shades the floor and its lower wall catches the light); the part of the slot the cap has\n * pulled out, a step darker (--litt-slot-fill); and a cap riding in the slot, 8px wide, standing taller than the plate\n * (--litt-cap, --litt-cap-lift), with a grip line down its face. Only raised things cast, straight down (R3). Never the\n * accent (R6): a form can hold many sliders.\n * - Notches: marks under the slot at the values you pass (marks), and a longer, darker one at home, the value the cap\n * comes back to (by default the defaultValue). Home holds the cap a little: within about a step of it, the hand\n * lets go there.\n * - Says its value (R5): at the end of the label row, at the small size in tabular figures, --litt-fg-muted, and --litt-fg\n * while the cap is held. showValue={false} leaves it out. Words for the two ends sit under the plate (\"Slower\",\n * \"Faster\").\n * - The label names the thumb (aria-labelledby), the help text describes it, and formatValue feeds both the shown\n * value and aria-valuetext. The thumb Radix keeps is invisible; the cap you see is this file's, so it can glide.\n * - Hand (R4): press on the cap and it is held where it was taken, so it moves with the finger 1:1, with no easing;\n * press on the slot and the cap goes there on the responsive spring, then follows. While held it sinks\n * --litt-press-depth and its cast tightens (--litt-cap-press), at once. Pushed fast it leans into the move, at most 4°, and\n * rights itself on the spring when the hand slows. The hand is this file's, not Radix's (Radix maps the pointer\n * across the whole width, which would jump the cap under the finger).\n * - Keys: arrows step, Home and End go to the ends, Page Up and Page Down move about a tenth of the range (whole\n * steps, never fewer than one); the cap glides there on the responsive spring. The focus ring is on the plate, for\n * :focus-visible only.\n * - Motion moves only transforms: the cap and the fill slide by translate (the fill's rail is as wide as the cap's\n * travel), and the lean and the sink are the cap's own transform. Reduced motion stills the glide and the lean.\n * - Touch: the plate is 44px tall. The slider owns horizontal drags: it is marked data-no-drag, so a sheet never moves\n * under it, and its touch-action leaves vertical scrolling to the page.\n * - Disabled: everything lies flat (nothing to push): the plate --litt-surface-2 with a hairline, the slot --litt-surface-3,\n * the cap --litt-surface-2 with a hairline. The label dims to --litt-fg-disabled; the value and the end words stay at\n * --litt-fg-subtle, because they are still read.\n * - Bodies (proposals/worlds.md, Bodies): this file is the contract (the props, the Radix root and thumbs, the label and\n * value words, the marks and home, the hand, the keys, the range form) and the Press body, which is the default: a deep slot with notches that light, and the value on a raised face that rides over the cap (a single slider with a value stands 68px tall for it). Flat\n * (proposals/flat-pill.md: a pill track, an ink fill, a round knob, the value at the track's end) lives in bodies/slider.flat.tsx and Device (a\n * fader: a well, engraved ticks, a key for a cap, the value on an LCD) in bodies/slider.device.tsx. Each takes\n * SliderBodyProps and carries data-body on its root. The travel's inset is --sl-pad: the body's root sets it, and\n * padOf reads it back as the root's left padding.\n * - Forced colors drops box-shadow and background colors, so the plate, the slot and the cap get real borders and\n * the cap takes the system highlight.\n *\n * Range (components.md, \"Slider\", the Range bullet): RangeSlider is two caps in one slot with the fill between them,\n * such as builds that took between 20s and 80s in a table filter. The span shows at the end of the label row (\"20s\n * to 80s\") when showValue is on. It reuses the plate, the label row, the help text, the end words and the disabled\n * look above.\n * - Names: each thumb is named by the label and its end (\"Build time, from\", \"Build time, to\"), and gets its own\n * aria-valuetext from formatValue. The shown value reads \"20s to 80s\": words, never a dash. The two thumbs sit in a\n * group named by the label (and marked aria-disabled when it is), so a screen reader says they belong together,\n * and the dimmed label of a disabled range is known to be inactive.\n * - Hand: a press takes the nearer cap, held where it was taken when the press is on it, or sent to the finger when\n * it is not. The focused cap draws the focus ring around itself, so you can tell which one the keys move.\n * - The caps never cross and stay minStepsBetweenThumbs steps apart. Radix would swap them (or mis-round a decimal\n * step), so Radix keeps their order (preserveThumbOrder) and this file holds the gap.\n * - Keys act on the focused thumb. The arrows are Radix's. Home, End, Page Up and Page Down are handled here,\n * because Radix sends Home to the first thumb and End to the last, whichever has focus.\n * - A form sends both values under name (FormData.getAll(name) is [from, to]), not under name[].\n */\nimport { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref, type RefObject } from \"react\";\nimport * as RadixSlider from \"@radix-ui/react-slider\";\nimport { byWorld, useMaterial } from \"../../lib/litt/motion\";\nimport { SliderDevice } from \"./bodies/slider.device\";\nimport { SliderFlat } from \"./bodies/slider.flat\";\n\nexport type SliderProps = {\n /** The label above the slider. Required, because it names the thumb for screen readers. */\n label: ReactNode;\n /** A hint under the slider, linked to the thumb with aria-describedby. */\n help?: ReactNode;\n /** The value, when you control it. Pair it with onValueChange. */\n value?: number;\n /** The value it starts at when you do not control it. Without one, it starts at min. */\n defaultValue?: number;\n /** Called with the new value on every move of the cap, by pointer or key. */\n onValueChange?: (value: number) => void;\n /** Called with the final value when a drag is released, or right after a key moves the cap. Use it to save. */\n onValueCommit?: (value: number) => void;\n /** The lowest value, with the cap at the start of the slot. */\n min?: number;\n /** The highest value, with the cap at the end of the slot. */\n max?: number;\n /** The gap between values. The cap snaps to it, and an arrow key moves one step. */\n step?: number;\n /** Values to mark with a notch under the slot, such as each whole step. Leave it out for a plain slot. */\n marks?: number[];\n /** The value the cap comes home to, marked with a longer notch: within about a step of it, the hand lets go there. Defaults to defaultValue; pass null for none. */\n home?: number | null;\n /** A word under the start of the plate, such as \"Slower\". Say which way is which. */\n minLabel?: ReactNode;\n /** A word under the end of the plate, such as \"Faster\". */\n maxLabel?: ReactNode;\n /** Says the value at the end of the label row (R5). On by default; false leaves it out. */\n showValue?: boolean;\n /** Turns a value into text, such as 1 into \"1.0x\". It feeds the shown value and aria-valuetext. Without it, the number is shown as it is. */\n formatValue?: (value: number) => string;\n /** Makes the slider unavailable: muted, skipped by Tab, and left out of a form, like a native field. */\n disabled?: boolean;\n /** The field name a form sends the value under. */\n name?: string;\n /** The id of the thumb, when you need your own. The label and the help text derive their ids from it. */\n id?: string;\n /** Extra classes for the wrapper, such as a width. */\n className?: string;\n /** The thumb, for focus or a form library. */\n ref?: Ref;\n};\n\nexport type RangeSliderProps = {\n /** The label above the slider. Required: each thumb is named by it and its end, such as \"Build time, from\". */\n label: ReactNode;\n /** A hint under the slider, linked to both thumbs with aria-describedby. */\n help?: ReactNode;\n /** The two values, [from, to], when you control them. Pair it with onValueChange. */\n value?: [number, number];\n /** The values it starts at when you do not control them. Without them, it starts open, at [min, max]. */\n defaultValue?: [number, number];\n /** Called with [from, to] on every move of either end, by pointer or key. */\n onValueChange?: (value: [number, number]) => void;\n /** Called with [from, to] when a drag is released, or right after a key moves an end. Use it to save or to run the filter. */\n onValueCommit?: (value: [number, number]) => void;\n /** The lowest value, at the start of the slot. */\n min?: number;\n /** The highest value, at the end of the slot. */\n max?: number;\n /** The gap between values. Both ends snap to it, and an arrow key moves the focused end one step. */\n step?: number;\n /** How many steps the ends stay apart. They never cross, and never meet unless you pass 0. */\n minStepsBetweenThumbs?: number;\n /** The words that finish each thumb's name, \"