{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "A track well, a green fill up to a knurled knob, tick marks and labelled ticks; arrows step, Shift steps large.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/slider/slider.tsx",
      "type": "registry:ui",
      "target": "components/metalui/slider/slider.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport { Well } from '../well/well';\n\n/* ─────────────────────────────────────────────────────────\n * SLIDER on Base UI Slider\n *\n *   track    a 10 tall well (the track well)\n *   fill     the green intent fill up to the knob\n *   marks    short tick marks along the track (moments, events)\n *   ticks    labelled ticks under the track\n *   knob     a knurled, anodized knob; arrows step, Shift steps large\n *   motion   a jump (a click, a key) rides the part spring; a drag follows the pointer exactly\n * Slots: Slider.Root, Slider.Track, Slider.Marks, Slider.Ticks, Slider.Knob.\n * ───────────────────────────────────────────────────────── */\n\nexport interface SliderRootProps {\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  largeStep?: number;\n  onValueChange: (value: number) => void;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/* Styled with the theme's utilities (the slider recipe on the track well). The root fills its box and the\n * track sits on the box's centre line; a jump rides the part spring, a drag follows the pointer. */\nconst ROOT = 'mu-slider group/slider relative w-full h-full touch-none';\nconst CONTROL = 'mu-slider-control relative w-full h-full touch-none cursor-pointer';\nconst TRACK = 'mu-slider-track absolute left-0 right-0 slider-track-place';\nconst FILL = 'mu-slider-fill h-full rounded-pill recipe-slider-fill opacity-slider-fill-opacity transition-slider-fill group-data-dragging/slider:transition-none';\nconst MARKS = 'mu-slider-marks absolute left-slider-track-inset right-slider-track-inset pointer-events-none slider-marks-place';\nconst MARK = 'absolute w-slider-mark-w h-slider-mark-h rounded-slider-mark-radius bg-slider-mark-color';\nconst TICKS = 'mu-slider-ticks absolute left-slider-track-inset right-slider-track-inset pointer-events-none slider-ticks-place';\nconst TICK = 'absolute -translate-x-1/2 before:absolute before:left-1/2 before:-top-slider-tick-lift before:w-slider-tick-w before:h-slider-tick-h before:bg-slider-tick-color';\nconst KNOB = 'mu-slider-knob top-1/2 size-slider-knob-size rounded-round cursor-grab recipe-slider-knob transition-slider-knob group-data-dragging/slider:cursor-grabbing group-data-dragging/slider:transition-none has-focus-visible:focus-ring';\n\nfunction Root({ value, min, max, step, largeStep, onValueChange, className, children }: SliderRootProps) {\n  return (\n    <BaseSlider.Root value={value} min={min} max={max} step={step} largeStep={largeStep} onValueChange={(v) => onValueChange(v as number)} className={className ? `${ROOT} ${className}` : ROOT}>\n      <BaseSlider.Control className={CONTROL}>{children}</BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n\n/** The track well and its fill. */\nfunction Track() {\n  return (\n    <BaseSlider.Track render={<Well variant=\"track\" radius=\"pill\" />} className={TRACK}>\n      <BaseSlider.Indicator className={FILL} />\n    </BaseSlider.Track>\n  );\n}\n\n/** Tick marks along the track, at fractions 0…1. */\nfunction Marks({ at }: { at: number[] }) {\n  return (\n    <div className={MARKS} aria-hidden>\n      {at.map((f, i) => (\n        <i key={i} className={MARK} style={{ left: `${(f * 100).toFixed(2)}%` }} />\n      ))}\n    </div>\n  );\n}\n\n/** Labelled ticks under the track: { at: 0…1, label }. The label is the caller's (a Label). */\nfunction Ticks({ ticks }: { ticks: { at: number; label: React.ReactNode }[] }) {\n  return (\n    <div className={TICKS} aria-hidden>\n      {ticks.map((t, i) => (\n        <span key={i} className={TICK} style={{ left: `${(t.at * 100).toFixed(2)}%` }}>\n          {t.label}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction Knob(props: { 'aria-label': string; getAriaValueText?: (formatted: string, value: number, index: number) => string }) {\n  return <BaseSlider.Thumb className={KNOB} {...props} />;\n}\n\nexport const Slider = Object.assign(Root, { Root, Track, Marks, Ticks, Knob });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/slider.md. SwiftUI: MetalSlider in the MetalUI Swift package."
}