4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T2bc6,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; import { motion, useMotionTemplate, useReducedMotion, useSpring, } from "motion/react"; const CARRIAGE = { stiffness: 520, damping: 34, mass: 0.45 } as const; const GRAB = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8, } as const; const INSTANT = { duration: 0 } as const; const THUMB = 18; const plain = (value: number) => String(value); function tidy(value: number) { return Math.round(value * 1e6) / 1e6; } export type SliderDetent = { value: number; label?: string }; const NONE: readonly (number | SliderDetent)[] = []; export type UseSliderDetentsOptions = { value: number; onValueChange: (value: number) => void; min?: number; max?: number; step?: number; detents?: readonly (number | SliderDetent)[]; pull?: number; thumbSize?: number; disabled?: boolean; haptic?: boolean; format?: (value: number) => string; label?: string; labelledBy?: string; }; export function useSliderDetents({ value, onValueChange, min = 0, max = 100, step = 1, detents = NONE, pull, thumbSize = THUMB, disabled = false, haptic = true, format = plain, label, labelledBy, }: UseSliderDetentsOptions) { const trackRef = useRef(null); const [dragging, setDragging] = useState(false); const list = useMemo( () => detents.map((d) => (typeof d === "number" ? { value: d } : d)), [detents], ); const range = max - min; const grab = pull ?? range * 0.045; const emit = useRef(onValueChange); emit.current = onValueChange; const emitted = useRef(value); emitted.current = value; const activeDetent = useMemo( () => list.findIndex((d) => tidy(d.value) === tidy(value)), [list, value], ); const marked = useRef(activeDetent); const held = useRef(false); const commit = useCallback( (next: number) => { const settled = Math.min(max, Math.max(min, tidy(next))); const index = list.findIndex((d) => tidy(d.value) === settled); if (index !== marked.current) { marked.current = index; if (haptic && index >= 0) navigator.vibrate?.(6); } if (settled !== emitted.current) { emitted.current = settled; emit.current(settled); } }, [haptic, list, max, min], ); const capture = useCallback( (clientX: number) => { const el = trackRef.current; if (!el || range <= 0) return null; const rect = el.getBoundingClientRect(); const travel = rect.width - thumbSize; if (travel <= 0) return null; const ratio = (clientX - rect.left - thumbSize / 2) / travel; const raw = Math.min(max, Math.max(min, min + ratio * range)); let index = -1; let nearest = grab; for (let i = 0; i < list.length; i += 1) { const distance = Math.abs(raw - list[i].value); if (distance <= nearest) { nearest = distance; index = i; } } if (index >= 0) return list[index].value; return min + Math.round((raw - min) / step) * step; }, [grab, list, max, min, range, step, thumbSize], ); const release = useCallback(() => { if (!held.current) return; held.current = false; setDragging(false); }, []); const toDetent = useCallback( (direction: number) => { const sorted = list.map((d) => d.value).toSorted((a, b) => a - b); const forward = sorted.find((d) => d > value + 1e-6); const backward = sorted.findLast((d) => d < value - 1e-6); const target = direction > 0 ? forward : backward; commit(target ?? (direction > 0 ? max : min)); }, [commit, list, max, min, value], ); useEffect(() => { window.addEventListener("blur", release); return () => window.removeEventListener("blur", release); }, [release]); const detentLabel = list[activeDetent]?.label; const valueText = detentLabel ? `${format(value)}, ${detentLabel}` : format(value); const percent = range > 0 ? Math.min(1, Math.max(0, (value - min) / range)) : 0; const trackProps = { role: "slider" as const, tabIndex: 0, "aria-orientation": "horizontal" as const, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-disabled": disabled || undefined, "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, style: { touchAction: "none" as const }, onPointerDown: (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; e.currentTarget.setPointerCapture?.(e.pointerId); e.currentTarget.focus({ preventScroll: true }); held.current = true; setDragging(true); const next = capture(e.clientX); if (next !== null) commit(next); }, onPointerMove: (e: React.PointerEvent) => { if (!held.current) return; const next = capture(e.clientX); if (next !== null) commit(next); }, onPointerUp: release, onPointerCancel: release, onLostPointerCapture: release, onKeyDown: (e: React.KeyboardEvent) => { if (disabled) return; const forward = e.key === "ArrowRight" || e.key === "ArrowUp"; const back = e.key === "ArrowLeft" || e.key === "ArrowDown"; if (forward || back) { const direction = forward ? 1 : -1; if (e.shiftKey) toDetent(direction); else commit(value + direction * step); } else if (e.key === "PageUp") { toDetent(1); } else if (e.key === "PageDown") { toDetent(-1); } else if (e.key === "Home") { commit(min); } else if (e.key === "End") { commit(max); } else { return; } e.preventDefault(); }, }; return { trackRef, trackProps, detents: list, activeDetent, percent, dragging, valueText, }; } export type SliderDetentsProps = { value: number; onValueChange: (value: number) => void; min?: number; max?: number; step?: number; detents?: readonly (number | SliderDetent)[]; pull?: number; label?: string; format?: (value: number) => string; disabled?: boolean; haptic?: boolean; className?: string; }; export function SliderDetents({ value, onValueChange, min = 0, max = 100, step = 1, detents = NONE, pull, label = "Value", format = plain, disabled = false, haptic = true, className = "", }: SliderDetentsProps) { const labelId = useId(); const reduced = useReducedMotion(); const { trackRef, trackProps, detents: list, activeDetent, percent, dragging, } = useSliderDetents({ value, onValueChange, min, max, step, detents, pull, disabled, haptic, format, labelledBy: labelId, }); const carriage = useSpring(percent * 100, CARRIAGE); const offset = useMotionTemplate`${carriage}%`; useEffect(() => { const target = percent * 100; if (reduced) carriage.jump(target); else carriage.set(target); }, [carriage, percent, reduced]); const widest = useMemo(() => { const options = [ format(min), format(max), ...list.map((d) => d.label ? `${format(d.value)} · ${d.label}` : format(d.value), ), ]; return options.reduce((a, b) => (b.length > a.length ? b : a), ""); }, [format, list, max, min]); const suffix = list[activeDetent]?.label ?? ""; const lastLabel = useRef(suffix); if (suffix) lastLabel.current = suffix; const span = max - min; return (

{label} {widest} {format(value)} {lastLabel.current ? ` · ${lastLabel.current}` : ""}

{list.map((d) => ( 0 ? `${((d.value - min) / span) * 100}%` : "0%", }} /> ))}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/slider-detents.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/slider-detents","itemId":"@motion-lexicon/slider-detents"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/slider-detents.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/slider-detents.tsx"}]}]]}],"$L53"]}]

Slider Detents

Installation

Files

components

Styles