{
  "title": "Slider",
  "description": "An input where the user selects a value from within a given range with spring thumb scaling physics.",
  "name": "motion-slider",
  "dependencies": [
    "motion",
    "@base-ui/react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/slider.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface SliderContextValue {\n    transition?: Transition;\n}\n\nconst SliderContext = React.createContext<SliderContextValue>({\n    transition: undefined,\n});\n\nexport interface SliderProps extends SliderPrimitive.Root.Props {\n    transition?: Transition;\n}\n\nexport interface SliderControlProps extends SliderPrimitive.Control.Props {}\n\nexport interface SliderTrackProps extends SliderPrimitive.Track.Props {}\n\nexport interface SliderIndicatorProps extends SliderPrimitive.Indicator.Props {\n    transition?: Transition;\n}\n\nexport interface SliderThumbProps extends SliderPrimitive.Thumb.Props {\n    transition?: Transition;\n}\n\nexport interface SliderValueProps extends SliderPrimitive.Value.Props {}\n\nfunction Slider({ className, defaultValue, value, min = 0, max = 100, transition, children, ...props }: SliderProps) {\n    const _values = React.useMemo(\n        () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\n        [value, defaultValue, min, max],\n    );\n\n    const hasCustomControl = React.Children.toArray(children).some(\n        (child) =>\n            React.isValidElement(child) &&\n            (child.type === SliderControl ||\n                (child.props as { \"data-slot\"?: string })?.[\"data-slot\"] === \"slider-control\"),\n    );\n\n    return (\n        <SliderContext.Provider value={{ transition }}>\n            <SliderPrimitive.Root\n                className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n                data-slot=\"slider\"\n                defaultValue={defaultValue}\n                value={value}\n                min={min}\n                max={max}\n                thumbAlignment=\"edge\"\n                {...props}>\n                {children ? (\n                    hasCustomControl ? (\n                        children\n                    ) : (\n                        <SliderControl>{children}</SliderControl>\n                    )\n                ) : (\n                    <SliderControl>\n                        <SliderTrack>\n                            <SliderIndicator transition={transition} />\n                        </SliderTrack>\n                        {Array.from({ length: _values.length }, (_, index) => (\n                            <SliderThumb key={index} transition={transition} />\n                        ))}\n                    </SliderControl>\n                )}\n            </SliderPrimitive.Root>\n        </SliderContext.Provider>\n    );\n}\n\nfunction SliderControl({ className, ...props }: SliderControlProps) {\n    return (\n        <SliderPrimitive.Control\n            data-slot=\"slider-control\"\n            className={cn(\n                \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SliderTrack({ className, ...props }: SliderTrackProps) {\n    return (\n        <SliderPrimitive.Track\n            data-slot=\"slider-track\"\n            className={cn(\n                \"bg-muted relative overflow-hidden rounded-full select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SliderIndicator({ className, transition: explicitTransition, ...props }: SliderIndicatorProps) {\n    const context = React.useContext(SliderContext);\n    const transition = explicitTransition ??\n        context.transition ?? {\n            type: \"spring\",\n            stiffness: 400,\n            damping: 28,\n        };\n\n    return (\n        <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className={cn(\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\", className)}\n            render={(indicatorProps) => (\n                <motion.div\n                    {...indicatorProps}\n                    layout\n                    transition={transition}\n                    className={cn(\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\", className)}\n                />\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SliderThumb({ className, transition: explicitTransition, ...props }: SliderThumbProps) {\n    const context = React.useContext(SliderContext);\n    const transition = explicitTransition ??\n        context.transition ?? {\n            type: \"spring\",\n            stiffness: 450,\n            damping: 25,\n        };\n\n    return (\n        <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            className={cn(\n                \"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\",\n                className,\n            )}\n            render={(thumbProps) => (\n                <motion.span\n                    {...thumbProps}\n                    whileHover={{ scale: 1.2 }}\n                    whileTap={{ scale: 0.9 }}\n                    transition={transition}\n                    className={cn(\n                        \"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\",\n                        className,\n                    )}\n                />\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SliderValue({ className, ...props }: SliderValueProps) {\n    return (\n        <SliderPrimitive.Value\n            data-slot=\"slider-value\"\n            className={cn(\"text-muted-foreground text-sm tabular-nums select-none\", className)}\n            {...props}\n        />\n    );\n}\n\nexport { Slider, SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderValue };\n"
    }
  ],
  "mcp": {
    "description": "An input where the user selects a value from within a given range. Provides spring thumb scaling on hover and tap.",
    "tags": [
      "component",
      "slider",
      "range",
      "input",
      "paceui",
      "animation"
    ]
  }
}