{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-slider-5",
  "description": "Slider with ticks",
  "registryDependencies": [
    "@coss/slider"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-slider-5.tsx",
      "content": "import { cn } from \"@/registry/default/lib/utils\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst max = 12;\nconst skipInterval = 2;\nconst ticks = [...Array(max + 1)].map((_, i) => i);\n\nexport default function Particle() {\n  return (\n    <div>\n      <Slider aria-label=\"Value selector\" defaultValue={5} max={max} />\n      <div\n        aria-label=\"Value scale from 0 to 12\"\n        className=\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs\"\n        role=\"group\"\n      >\n        {ticks.map((_, i) => (\n          <span\n            className=\"flex w-0 flex-col items-center justify-center gap-2\"\n            key={String(i)}\n          >\n            <span\n              className={cn(\n                \"h-1 w-px bg-muted-foreground/72\",\n                i % skipInterval !== 0 && \"h-0.5\",\n              )}\n            />\n            <span className={cn(i % skipInterval !== 0 && \"opacity-0\")}>\n              {i}\n            </span>\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "slider"
  ],
  "type": "registry:block"
}