{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "Draggable value selector with single or range thumbs, steps, and keyboard control.",
  "dependencies": [
    "@radix-ui/react-slider",
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/slider.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Slider — range input with spring-animated thumb and track fill.\n * @module packages/ui/components/ui/slider\n * @layer core\n *\n * @component\n * @example\n * import { Slider } from '@saasflare/ui';\n * <Slider defaultValue={[50]} max={100} step={1} />\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springBouncy } from \"@saasflare/ui\"\n\n/**\n * Props for {@link Slider}.\n *\n * Extends the Radix Slider root props (`value`, `min`, `max`, `step`, …) with\n * {@link SaasflareComponentProps}, so `animated` can be supplied per-instance\n * or inherited from <SaasflareProvider>.\n */\ninterface SliderProps\n  extends Omit<React.ComponentProps<typeof SliderPrimitive.Root>, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * Range slider for selecting one or more numeric values along a track. Renders\n * one thumb per value with spring-animated hover/press scaling; supports\n * horizontal and vertical layouts via the Radix `orientation` prop.\n *\n * @component\n * @layer core\n *\n * @example\n * <Slider defaultValue={[50]} max={100} step={1} />\n */\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: SliderProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springBouncy)\n\n  const _values = React.useMemo(\n    () => value ?? defaultValue ?? [min],\n    [value, defaultValue, min]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      {...props}\n      data-slot=\"slider\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[orientation=horizontal]:h-5 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-5 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col data-[disabled]:opacity-50\",\n        className\n      )}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute rounded-full bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          asChild\n        >\n          <m.span\n            className=\"block size-4 shrink-0 cursor-grab rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing\"\n            whileHover={motion.disabled ? undefined : { scale: 1.2 }}\n            whileTap={motion.disabled ? undefined : { scale: 0.9 }}\n            transition={motion.transition}\n          />\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider, type SliderProps }\n",
      "target": "components/ui/slider.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/slider.json"
  }
}