{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"slider","type":"registry:ui","title":"Slider","description":"Pick a value or a range on a track that follows your finger.","categories":["inputs"],"dependencies":["motion"],"registryDependencies":["https://uiarc.dev/r/arc-foundation.json"],"files":[{"path":"registry/components/slider/slider.tsx","type":"registry:component","target":"@components/arc/slider/slider.tsx","content":"\"use client\";\n\nimport { useEffect, useId, useLayoutEffect, useRef, useState, type FocusEvent, type KeyboardEvent, type PointerEvent, type ReactNode } from \"react\";\nimport { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionStyle, type MotionValue, type Variants } from \"motion/react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport styles from \"./slider.module.css\";\n\nexport type SliderValue = number | [number, number];\nexport interface SliderMark { value: number; label?: string; }\n\nexport interface SliderProps<T extends SliderValue = number> {\n  /** Visible label. Range thumbs are named from it unless `thumbLabels` says otherwise. */\n  label: string;\n  /** A number for one thumb, a pair for a range. */\n  value?: T;\n  defaultValue?: T;\n  onValueChange?: (value: T) => void;\n  /** Runs once a drag is released or a key changes the value, for work too heavy for every step. */\n  onValueCommit?: (value: T) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** PageUp, PageDown, and Shift with an arrow move this far. Defaults to a tenth of the range. */\n  largeStep?: number;\n  /** Ticks on the track. A number draws a tick; a mark with a label also prints it under the track, and clicking it moves there. */\n  marks?: (number | SliderMark)[];\n  /** The closest two range thumbs may sit, in steps. */\n  minStepsBetweenThumbs?: number;\n  /** Formats the readout, the bubble, and the spoken value. */\n  format?: (value: number) => string;\n  /** Show the value beside the label. The bubble over the thumb still appears while dragging or focused. */\n  showValue?: boolean;\n  /** Accessible names for the two range thumbs. */\n  thumbLabels?: [string, string];\n  /** Content beside the track, such as an icon or a mute button. */\n  start?: ReactNode;\n  end?: ReactNode;\n  /** Submits the value with a form, one hidden input per thumb. */\n  name?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\ntype Part = { key: string; digit: number } | { key: string; text: string };\ntype Drag = { pointer: number; index: number | null; grab: number; x: number; raw: number; samples: { t: number; p: number }[] };\n\nconst { spring, duration, blur } = motionTokens;\nconst enterEase = [...motionTokens.ease.enter] as [number, number, number, number];\nconst exitEase = [...motionTokens.ease.standard] as [number, number, number, number];\nconst DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n/** Motion drops velocity on time-defined springs, so anything a gesture hands off to runs the same spring written as stiffness and damping.\n *  Positions are percentages of the track, so the rest thresholds are set far below a pixel. */\nconst physical = ({ visualDuration, bounce }: { visualDuration: number; bounce: number }) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: \"spring\" as const, stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta: .002, restSpeed: .02 }; };\nconst thumbSpring = physical(spring.snappy);\nconst kickSpring = physical(spring.morph);\n/** Pixels of rubber-band travel past a limit, the velocity of a key press at a limit, and the pixel size of a step that release momentum may choose. */\nconst STRETCH = 9, BUMP_PX = 150, SNAP_PX = 12;\n/** iOS style resistance: travel past a limit gives less and less, and never more than `limit` pixels. */\nconst rubber = (distance: number, limit = STRETCH) => Math.sign(distance) * (1 - 1 / (Math.abs(distance) * .55 / limit + 1)) * limit;\n/** Where a release is heading, from a scroll-like deceleration (rate .99), in the same units as the velocity. */\nconst project = (velocity: number) => velocity * .099;\nconst decimalsOf = (value: number) => (String(value).split(\".\")[1] ?? \"\").length;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\nconst isDigit = (char: string) => char >= \"0\" && char <= \"9\";\n\n/** Digits are keyed by place value and the text around them by side, so $950 → $1,000 opens a column and a comma while the rest roll. */\nfunction partsOf(text: string): Part[] {\n  const chars = [...text];\n  const first = chars.findIndex(isDigit);\n  const last = chars.length - 1 - [...chars].reverse().findIndex(isDigit);\n  let place = chars.filter(isDigit).length;\n  return chars.map((char, index): Part => {\n    if (first < 0 || index < first) return { key: `p${index}${char}`, text: char };\n    if (index > last) return { key: `s${chars.length - index}${char}`, text: char };\n    if (isDigit(char)) return { key: `d${--place}`, digit: Number(char) };\n    return { key: `g${place}${char}`, text: char };\n  });\n}\n\n/* A new column opens its width while it rises in the direction of change; a leaving one closes on a spring that never passes zero. */\nconst slot: Variants = {\n  enter: (direction: number) => ({ width: 0, scale: .6, opacity: 0, y: `${direction * .3}em`, filter: `blur(${blur.soft}px)` }),\n  center: { width: \"auto\", scale: 1, opacity: 1, y: 0, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" }, transition: { width: spring.morph, scale: spring.morph, opacity: spring.morph, y: spring.snappy, filter: { duration: .22, ease: enterEase } } },\n  exit: (direction: number) => ({ width: 0, scale: .6, opacity: 0, y: `${direction * -.3}em`, filter: `blur(${blur.subtle}px)`, transition: { width: spring.smooth, scale: spring.smooth, y: { duration: duration.fast, ease: exitEase }, opacity: { duration: duration.instant }, filter: { duration: duration.instant } } }),\n};\n/* Reduced motion keeps a short fade and no travel. Its resting state matches `slot`, so either branch hydrates the same markup. */\nconst still: Variants = { enter: { width: \"auto\", scale: 1, opacity: 0, y: 0, filter: \"none\" }, center: { width: \"auto\", scale: 1, opacity: 1, y: 0, filter: \"none\", transition: { duration: duration.instant } }, exit: { width: 0, opacity: 0, transition: { duration: 0 } } };\n\n/** One digit on the wheel. Its distance from the wheel position sets where it sits, how clear it is, and whether it shows. */\nfunction Glyph({ position, digit }: { position: MotionValue<number>; digit: number }) {\n  const offset = (current: number) => ((((digit - current) % 10) + 15) % 10) - 5;\n  const y = useTransform(position, current => `${offset(current) * 1.05}em`);\n  const opacity = useTransform(position, current => Math.max(0, 1 - Math.abs(offset(current)) ** 1.5 * 1.1));\n  const visibility = useTransform(position, current => Math.abs(offset(current)) >= 1 ? \"hidden\" : \"visible\");\n  const filter = useTransform(position, current => { const distance = Math.abs(offset(current)); return distance < .02 || distance >= 1 ? \"none\" : `blur(${(distance * blur.soft * .75).toFixed(2)}px)`; });\n  return <motion.span className={styles.glyph} style={{ y, opacity, filter, visibility }}>{digit}</motion.span>;\n}\n\n/** An odometer wheel. It turns the way the value moved, wraps 9 → 0, and retargets mid spin while a drag keeps it busy. */\nfunction Wheel({ digit, direction }: { digit: number; direction: number }) {\n  const reduced = useReducedMotion();\n  const position = useMotionValue(digit);\n  const wheel = useRef({ digit, target: digit });\n  useLayoutEffect(() => {\n    const state = wheel.current;\n    if (state.digit === digit) return;\n    state.target += direction > 0 ? (digit - state.digit + 10) % 10 : -((state.digit - digit + 10) % 10);\n    state.digit = digit;\n    if (reduced) position.jump(state.target);\n    else animate(position, state.target, thumbSpring);\n  }, [digit, direction, position, reduced]);\n  return <><span className={styles.sizer}>0</span>{DIGITS.map(item => <Glyph key={item} position={position} digit={item} />)}</>;\n}\n\n/** A formatted value whose digits roll in the direction it moved and whose width follows new columns on a spring. */\nfunction RollingNumber({ value, text }: { value: number; text: string }) {\n  const reduced = useReducedMotion();\n  const [trail, setTrail] = useState({ value, direction: 1 });\n  if (trail.value !== value) setTrail({ value, direction: value > trail.value ? 1 : -1 });\n  const direction = trail.value === value ? trail.direction : value > trail.value ? 1 : -1;\n  return <span className={styles.number}><AnimatePresence initial={false} custom={direction}>{partsOf(text).map(part => <motion.span key={part.key} className={\"digit\" in part ? styles.column : styles.symbol} custom={direction} variants={reduced ? still : slot} initial=\"enter\" animate=\"center\" exit=\"exit\">\n    {\"digit\" in part ? <Wheel digit={part.digit} direction={direction} /> : part.text}\n  </motion.span>)}</AnimatePresence></span>;\n}\n\nconst bubbleIn = { opacity: 0, scale: .6, y: 6, filter: `blur(${blur.subtle}px)` };\nconst bubbleRest = { opacity: 1, scale: 1, y: 0, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" } };\nconst bubbleOut = { opacity: 0, scale: .8, y: 4, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: exitEase } };\nconst bubbleEnter = { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } };\n\ninterface ThumbProps { quiet: boolean; index: number; shown: MotionValue<number>; value: number; text: string; low: number; high: number; ariaLabel?: string; labelledBy?: string; active: boolean; lifted: boolean; bubble: boolean; disabled?: boolean; onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void; onFocus: (event: FocusEvent<HTMLDivElement>) => void; onBlur: () => void; }\n\n/** The thumb rides a layer as wide as the track, so a percentage transform places it with no measuring, on the server too. */\nfunction Thumb({ quiet, index, shown, value, text, low, high, ariaLabel, labelledBy, active, lifted, bubble, disabled, onKeyDown, onFocus, onBlur }: ThumbProps) {\n  const reduced = useReducedMotion();\n  const x = useTransform(shown, current => `${current - 100}%`);\n  return <motion.div className={styles.thumbLayer} style={{ x, zIndex: active ? 2 : 1 }}>\n    <motion.div role=\"slider\" data-thumb=\"\" data-index={index} data-active={lifted || undefined} data-quiet={quiet || undefined} className={styles.thumb} tabIndex={disabled ? -1 : 0}\n      aria-label={ariaLabel} aria-labelledby={ariaLabel ? undefined : labelledBy} aria-valuemin={low} aria-valuemax={high} aria-valuenow={value} aria-valuetext={text} aria-orientation=\"horizontal\" aria-disabled={disabled || undefined}\n      initial={false} animate={{ scale: lifted ? 1.16 : 1 }} transition={reduced ? { duration: 0 } : spring.snappy} onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} />\n    <motion.span className={styles.bubbleAnchor} style={{ \"--at\": shown } as MotionStyle}>\n      <AnimatePresence>{bubble && <motion.span key=\"bubble\" className={styles.bubble} aria-hidden=\"true\" initial={reduced ? { opacity: 0 } : bubbleIn} animate={bubbleRest} exit={reduced ? { opacity: 0, transition: { duration: duration.instant } } : bubbleOut} transition={reduced ? { duration: .15 } : bubbleEnter}>\n        <RollingNumber value={value} text={text} />\n      </motion.span>}</AnimatePresence>\n    </motion.span>\n  </motion.div>;\n}\n\n/**\n * A value or a range on a track. The thumb follows the pointer 1:1, rubber-bands past its limits, and settles on the step grid with\n * the velocity of the release; pressing the track springs the nearest thumb there. A bubble with rolling digits rides the thumb while\n * it is dragged or keyboard focused. Arrows, Shift+arrows, PageUp, PageDown, Home, and End work as in a native range input.\n */\nexport function Slider<T extends SliderValue = number>({ label, value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step: stepProp = 1, largeStep, marks, minStepsBetweenThumbs = 0, format, showValue = true, thumbLabels, start, end, name, disabled, className }: SliderProps<T>) {\n  const reduced = useReducedMotion();\n  const labelId = useId();\n  const step = stepProp > 0 ? stepProp : 1;\n  const span = max - min || 1;\n  const isRange = Array.isArray(value ?? defaultValue);\n  const toArray = (input: SliderValue | undefined) => input === undefined ? [min, max].slice(0, isRange ? 2 : 1) : Array.isArray(input) ? [input[0], input[1]] : [input];\n  const [internal, setInternal] = useState(() => toArray(defaultValue));\n  const values = value === undefined ? internal : toArray(value);\n  const decimals = Math.max(decimalsOf(step), decimalsOf(min));\n  const formatValue = format ?? ((input: number) => input.toLocaleString(\"en-US\", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }));\n  const gap = isRange ? minStepsBetweenThumbs * step : 0;\n  const pct = (input: number) => ((input - min) / span) * 100;\n  const valueAt = (percent: number) => min + (percent / 100) * span;\n  const snap = (input: number) => Number((min + Math.round((input - min) / step) * step).toFixed(decimals));\n  const lowOf = (index: number, current: number[]) => index === 1 ? current[0] + gap : min;\n  const highOf = (index: number, current: number[]) => index === 0 && isRange ? current[1] - gap : max;\n  const settle = (index: number, input: number, current: number[]) => clamp(snap(clamp(input, min, max)), lowOf(index, current), highOf(index, current));\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const thumbsRef = useRef<HTMLDivElement>(null);\n  const latest = useRef(values);\n  const goal = useRef(values.map(pct));\n  const drag = useRef<Drag | null>(null);\n  const pointerFocus = useRef(false);\n  const lingerTimer = useRef<number | undefined>(undefined);\n  const [dragging, setDragging] = useState<number | null>(null);\n  const [keyFocus, setKeyFocus] = useState<number | null>(null);\n  const [linger, setLinger] = useState<number | null>(null);\n  const [lastActive, setLastActive] = useState(isRange ? 1 : 0);\n  const [quiet, setQuiet] = useState<number | null>(null);\n\n  // Each thumb is a committed position plus a catch-up offset: a pressed track springs the offset to zero while the pointer moves the\n  // position 1:1, so the thumb glides to the finger and never lags behind it.\n  const pos0 = useMotionValue(pct(values[0])), pos1 = useMotionValue(pct(values[1] ?? values[0]));\n  const lag0 = useMotionValue(0), lag1 = useMotionValue(0);\n  const shown0 = useTransform(() => pos0.get() + lag0.get());\n  const shown1 = useTransform(() => pos1.get() + lag1.get());\n  const clipPath = useTransform(() => { const from = isRange ? clamp(shown0.get(), 0, 100) : 0; const to = clamp((isRange ? shown1 : shown0).get(), 0, 100); return `inset(0 ${(100 - to).toFixed(3)}% 0 ${from.toFixed(3)}% round 999px)`; });\n  const thumbs = [{ pos: pos0, lag: lag0, shown: shown0 }, { pos: pos1, lag: lag1, shown: shown1 }];\n\n  const emit = (next: number[]) => (isRange ? [next[0], next[1]] : next[0]) as T;\n  function commit(index: number, next: number) {\n    const current = latest.current;\n    if (current[index] === next) return;\n    const updated = current.map((item, at) => at === index ? next : item);\n    latest.current = updated;\n    if (value === undefined) setInternal(updated);\n    onValueChange?.(emit(updated));\n  }\n\n  // Values that arrive from outside a drag (keys, props, a clicked mark) spring the thumb to their place.\n  useLayoutEffect(() => {\n    latest.current = values;\n    values.forEach((item, index) => {\n      const target = pct(item), thumb = thumbs[index];\n      if (drag.current?.index === index || goal.current[index] === target) return;\n      goal.current[index] = target;\n      const from = thumb.pos.get() + thumb.lag.get();\n      thumb.lag.jump(0);\n      thumb.pos.jump(from);\n      if (reduced) thumb.pos.jump(target); else animate(thumb.pos, target, thumbSpring);\n    });\n  });\n  useEffect(() => () => window.clearTimeout(lingerTimer.current), []);\n\n  const thumbNode = (index: number) => thumbsRef.current?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n  /** Focus that follows a pointer keeps the thumb quiet: no ring and no bubble until a key is pressed. */\n  function focusFromPointer(index: number) {\n    const node = thumbNode(index);\n    if (!node || document.activeElement === node) return;\n    setQuiet(index);\n    pointerFocus.current = true;\n    node.focus({ preventScroll: true });\n    pointerFocus.current = false;\n  }\n  const trackWidth = () => trackRef.current?.getBoundingClientRect().width || 1;\n  function nearest(at: number, current: number[]) {\n    if (!isRange) return 0;\n    const low = Math.abs(at - pct(current[0])), high = Math.abs(at - pct(current[1]));\n    return low === high ? (at < pct(current[0]) ? 0 : 1) : low < high ? 0 : 1;\n  }\n  function holdBubble(index: number) {\n    window.clearTimeout(lingerTimer.current);\n    setLinger(index);\n    lingerTimer.current = window.setTimeout(() => setLinger(null), 700);\n  }\n\n  /** Starts tracking one thumb. A press on the track springs the thumb over from where it was; a grabbed thumb keeps its grab offset. */\n  function begin(state: Drag, index: number, at: number, press: boolean) {\n    const thumb = thumbs[index];\n    const from = thumb.pos.get() + thumb.lag.get();\n    state.index = index;\n    state.grab = press ? 0 : at - from;\n    thumb.lag.jump(0);\n    thumb.pos.jump(from);\n    setDragging(index);\n    setLastActive(index);\n    window.clearTimeout(lingerTimer.current);\n    setLinger(null);\n    focusFromPointer(index);\n    if (press) follow(state, at, 0, true);\n  }\n  /** Places the dragged thumb under the pointer, with resistance past its limits, and commits the stepped value beneath it. */\n  function follow(state: Drag, at: number, time: number, press = false) {\n    const index = state.index;\n    if (index === null) return;\n    const thumb = thumbs[index], current = latest.current, width = trackWidth();\n    const raw = at - state.grab;\n    const low = pct(lowOf(index, current)), high = pct(highOf(index, current));\n    const edge = clamp(raw, low, high);\n    const placed = reduced ? edge : edge + (rubber(((raw - edge) / 100) * width) / width) * 100;\n    if (press && !reduced) {\n      const from = thumb.pos.get();\n      thumb.pos.jump(placed);\n      thumb.lag.jump(from - placed);\n      animate(thumb.lag, 0, thumbSpring);\n    } else thumb.pos.set(placed);\n    state.raw = raw;\n    state.samples.push({ t: time, p: placed });\n    if (state.samples.length > 6) state.samples.shift();\n    commit(index, settle(index, valueAt(raw), current));\n  }\n\n  function onPointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (disabled || event.button !== 0 || !event.isPrimary) return;\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    const at = ((event.clientX - rect.left) / (rect.width || 1)) * 100;\n    const grabbed = (event.target as HTMLElement).closest<HTMLElement>(\"[data-thumb]\");\n    const current = latest.current;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const state: Drag = { pointer: event.pointerId, index: null, grab: 0, x: event.clientX, raw: at, samples: [] };\n    drag.current = state;\n    // Stacked range thumbs wait for the first movement to decide which one the pointer means.\n    if (grabbed && isRange && current[0] === current[1]) { focusFromPointer(Number(grabbed.dataset.index)); return; }\n    begin(state, grabbed ? Number(grabbed.dataset.index) : nearest(at, current), at, !grabbed);\n    state.samples = [{ t: event.timeStamp, p: thumbs[state.index ?? 0].pos.get() }];\n  }\n  function onPointerMove(event: PointerEvent<HTMLDivElement>) {\n    const state = drag.current;\n    if (!state || state.pointer !== event.pointerId) return;\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    const at = ((event.clientX - rect.left) / (rect.width || 1)) * 100;\n    if (state.index === null) {\n      const dx = event.clientX - state.x;\n      if (Math.abs(dx) < 2) return;\n      begin(state, dx < 0 ? 0 : 1, at - (dx / (rect.width || 1)) * 100, false);\n    }\n    follow(state, at, event.timeStamp);\n  }\n  function onPointerEnd(event: PointerEvent<HTMLDivElement>) {\n    const state = drag.current;\n    if (!state || state.pointer !== event.pointerId) return;\n    drag.current = null;\n    const index = state.index;\n    if (index === null) return;\n    const thumb = thumbs[index], current = latest.current, width = trackWidth();\n    // Velocity from the last few frames, in percent per second; a pointer that paused before letting go carries none.\n    const samples = state.samples, first = samples[0], last = samples[samples.length - 1];\n    const elapsed = last && first ? (last.t - first.t) / 1000 : 0;\n    // A release during the catch-up spring keeps that spring's speed too.\n    const velocity = (elapsed > .008 && event.timeStamp - last.t < 60 ? (last.p - first.p) / elapsed : 0) + thumb.lag.getVelocity();\n    // On a coarse grid the release momentum may carry the thumb one step further, never more.\n    const stepPct = (step / span) * 100;\n    const carry = event.type === \"pointerup\" && (stepPct / 100) * width >= SNAP_PX ? clamp(project(velocity), -stepPct, stepPct) : 0;\n    const next = settle(index, valueAt(state.raw + carry), current);\n    const from = thumb.pos.get() + thumb.lag.get(), target = pct(next);\n    thumb.lag.jump(0);\n    thumb.pos.jump(from);\n    goal.current[index] = target;\n    if (reduced) thumb.pos.jump(target); else animate(thumb.pos, target, { ...thumbSpring, velocity });\n    commit(index, next);\n    setDragging(null);\n    holdBubble(index);\n    onValueCommit?.(emit(latest.current));\n  }\n\n  function onKeyDown(index: number, event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    const current = latest.current, now = current[index];\n    const large = largeStep ?? Math.max(step, snap(min + span / 10) - min);\n    const moves: Record<string, number> = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, PageUp: large, PageDown: -large };\n    let wanted: number;\n    if (event.key === \"Home\") wanted = lowOf(index, current);\n    else if (event.key === \"End\") wanted = highOf(index, current);\n    else if (event.key in moves) wanted = now + (event.shiftKey && /^Arrow/.test(event.key) ? Math.sign(moves[event.key]) * large : moves[event.key]);\n    else return;\n    event.preventDefault();\n    setKeyFocus(index);\n    setQuiet(null);\n    setLastActive(index);\n    const next = settle(index, wanted, current);\n    // At a limit the thumb strains toward the press and springs home, so the key still answers.\n    if (next === now) {\n      const toward = Math.sign(wanted - now);\n      if (toward && !reduced) animate(thumbs[index].pos, goal.current[index], { ...kickSpring, velocity: (toward * BUMP_PX / trackWidth()) * 100 });\n      return;\n    }\n    commit(index, next);\n    onValueCommit?.(emit(latest.current));\n  }\n\n  function jumpTo(target: number) {\n    if (disabled) return;\n    const current = latest.current, index = nearest(pct(target), current);\n    const next = settle(index, target, current);\n    setLastActive(index);\n    focusFromPointer(index);\n    if (next === current[index]) return;\n    commit(index, next);\n    onValueCommit?.(emit(latest.current));\n  }\n\n  const markList = (marks ?? []).map(mark => typeof mark === \"number\" ? { value: mark } as SliderMark : mark).filter(mark => mark.value >= min && mark.value <= max);\n  const ticks = markList.filter(mark => mark.value > min && mark.value < max);\n  const labelled = markList.filter(mark => mark.label);\n  const inRange = (mark: number) => isRange ? mark >= values[0] && mark <= values[1] : mark <= values[0];\n  const names = thumbLabels ?? [`${label}, minimum`, `${label}, maximum`];\n\n  return <div className={[styles.root, className].filter(Boolean).join(\" \")} data-disabled={disabled || undefined} data-dragging={dragging !== null || undefined} data-marks={labelled.length > 0 || undefined}>\n    <div className={styles.header}>\n      <span id={labelId} className={styles.label}>{label}</span>\n      {showValue && <span className={styles.readout} aria-hidden=\"true\">\n        <RollingNumber value={values[0]} text={formatValue(values[0])} />\n        {isRange && <><span className={styles.dash}>–</span><RollingNumber value={values[1]} text={formatValue(values[1])} /></>}\n      </span>}\n    </div>\n    <div className={styles.body}>\n      {start && <div className={styles.start}>{start}</div>}\n      <div className={styles.control} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerEnd} onPointerCancel={onPointerEnd} onLostPointerCapture={onPointerEnd} onMouseDown={event => event.preventDefault()}>\n        <div ref={trackRef} className={styles.track}>\n          {ticks.map(mark => <span key={mark.value} className={styles.tick} style={{ left: `${pct(mark.value)}%` }} />)}\n          <motion.div className={styles.fill} style={{ clipPath }}>{ticks.map(mark => <span key={mark.value} className={styles.tick} style={{ left: `${pct(mark.value)}%` }} />)}</motion.div>\n        </div>\n        <div ref={thumbsRef} className={styles.thumbs}>\n          {values.map((item, index) => <Thumb key={index} quiet={quiet === index} index={index} shown={thumbs[index].shown} value={item} text={formatValue(item)} low={lowOf(index, values)} high={highOf(index, values)}\n            ariaLabel={isRange ? names[index] : undefined} labelledBy={labelId} active={lastActive === index} lifted={dragging === index} bubble={dragging === index || keyFocus === index || linger === index} disabled={disabled}\n            onKeyDown={event => onKeyDown(index, event)} onFocus={event => { if (!pointerFocus.current && event.currentTarget.matches(\":focus-visible\")) setKeyFocus(index); }} onBlur={() => { setKeyFocus(current => current === index ? null : current); setQuiet(current => current === index ? null : current); }} />)}\n        </div>\n      </div>\n      {end && <div className={styles.end}>{end}</div>}\n      {labelled.length > 0 && <div className={styles.marks} aria-hidden=\"true\">\n        {labelled.map(mark => <span key={mark.value} className={styles.markLabel} data-on={inRange(mark.value) || undefined} data-edge={mark.value === min ? \"start\" : mark.value === max ? \"end\" : undefined} style={{ left: `${pct(mark.value)}%` }} onClick={() => jumpTo(mark.value)}>{mark.label}</span>)}\n      </div>}\n    </div>\n    {name && values.map((item, index) => <input key={index} type=\"hidden\" name={name} value={item} disabled={disabled} />)}\n  </div>;\n}\n\nexport default Slider;\n"},{"path":"registry/components/slider/slider.module.css","type":"registry:component","target":"@components/arc/slider/slider.module.css","content":"/* Set --slider-thumb and --slider-track to resize. The track is inset by half a thumb, so a thumb at either limit stays inside the box. */\n.root { --slider-thumb: 22px; --slider-track: 6px; display: grid; width: 100%; min-width: 0; color: var(--foreground); font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); user-select: none; -webkit-user-select: none; }\n.header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--space-4); }\n.label { min-width: 0; font-weight: 500; }\n.readout { display: inline-flex; flex: none; align-items: center; gap: .3em; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.dash { color: var(--text-muted); }\n/* Adornments carry their own space, so an empty column costs nothing. */\n.body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }\n.start { display: flex; grid-area: 1 / 1; margin-right: var(--space-3); }\n.end { display: flex; grid-area: 1 / 3; margin-left: var(--space-3); }\n/* The whole row takes the press; vertical pans still scroll the page on touch. */\n.control { position: relative; grid-area: 1 / 2; height: var(--control-height-md); cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }\n.track { position: absolute; top: 50%; right: calc(var(--slider-thumb) / 2); left: calc(var(--slider-thumb) / 2); height: var(--slider-track); margin-top: calc(var(--slider-track) / -2); border-radius: var(--radius-pill); background: var(--control-track); }\n/* The fill spans the track and is revealed by a clip that follows the thumbs on the same frame. Ticks inside it are the \"on\" set, cut exactly at the thumb. */\n.fill { position: absolute; inset: 0; border-radius: inherit; background: var(--control-fill); }\n.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--foreground) 30%, transparent); }\n.fill .tick { background: color-mix(in oklch, var(--control-glyph) 60%, transparent); }\n.thumbs { position: absolute; inset: 0 calc(var(--slider-thumb) / 2); container-type: inline-size; pointer-events: none; }\n/* Each layer is as wide as the track and slides by a percentage of itself; it only ever overflows to the left, which never scrolls. */\n.thumbLayer { position: absolute; inset: 0; }\n/* Centering uses the translate property, so Motion's scale on transform composes with it instead of replacing it. */\n.thumb { position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--slider-thumb); height: var(--slider-thumb); translate: 50% -50%; border: 0; border-radius: var(--radius-pill); background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); pointer-events: auto; cursor: grab; outline: 0 solid transparent; transition: box-shadow var(--duration-fast) var(--ease-standard); }\n.thumb::after { content: \"\"; position: absolute; inset: -11px; border-radius: inherit; }\n/* A thumb focused by a press stays quiet until the keyboard takes over. */\n.thumb:focus-visible:not([data-quiet]) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }\n.root[data-dragging], .root[data-dragging] .control, .root[data-dragging] .thumb { cursor: grabbing; }\n/* The bubble centers on the thumb until it would pass the component's edge, then holds there. --at is the thumb position in percent of\n   the track, written each frame, and cqw measures the track, so the clamp needs no JavaScript measuring. It floats higher on touch so a fingertip never hides it. */\n.bubbleAnchor { --edge: calc(var(--slider-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--slider-thumb) / 2 + 8px); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }\n@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--slider-thumb) / 2 + 18px); } }\n.bubble { display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 var(--space-3); border: 1px solid color-mix(in oklch, var(--background) 14%, var(--foreground)); border-radius: var(--radius-pill); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transform-origin: 50% 100%; }\n/* Mark labels sit on their ticks; one at a limit keeps its outer edge inside the component. */\n.marks { position: relative; grid-area: 2 / 2; height: 1.25rem; margin: calc(var(--space-1) * -1) calc(var(--slider-thumb) / 2) 0; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }\n.markLabel { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }\n.markLabel[data-edge=\"start\"] { translate: max(-50%, calc(var(--slider-thumb) / -2)) 0; }\n.markLabel[data-edge=\"end\"] { translate: min(-50%, calc(-100% + var(--slider-thumb) / 2)) 0; }\n.markLabel[data-on] { color: var(--text-secondary); }\n@media (hover: hover) and (pointer: fine) { .markLabel:hover { color: var(--foreground); } }\n.root[data-disabled] { opacity: .5; }\n.root[data-disabled] .control, .root[data-disabled] .thumb, .root[data-disabled] .markLabel { cursor: not-allowed; }\n/* Rolling digits: each is a wheel whose window reaches a little past the line box and feathers out, so a turning digit fades at the edge. */\n.number { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }\n.column { --feather: .2em; position: relative; display: inline-block; overflow-x: visible; overflow-y: clip; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); }\n.sizer { visibility: hidden; }\n.glyph { position: absolute; inset: var(--feather) 0; text-align: center; }\n.symbol { display: inline-block; overflow-x: clip; white-space: pre; }\n@media (prefers-reduced-motion: reduce) { .thumb, .markLabel { transition: none; } }\n"}],"docs":"Docs and live preview: https://uiarc.dev/components/slider","meta":{"tier":"free","kind":"component","docs":"https://uiarc.dev/components/slider","markdown":"https://uiarc.dev/components/slider/markdown","tags":["slider","range","input"]}}