{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-slider-15",
  "description": "Price range slider",
  "registryDependencies": [
    "@coss/fieldset",
    "@coss/slider"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-slider-15.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 5;\nconst max = 1240;\n\nexport default function Particle() {\n  const [values, setValues] = useState([min, max]);\n\n  const formatPrice = (price: number) =>\n    price === max\n      ? `$${price.toLocaleString()}+`\n      : `$${price.toLocaleString()}`;\n\n  return (\n    <Fieldset className=\"flex max-w-none flex-col gap-3\">\n      <FieldsetLegend className=\"tabular-nums\">\n        From {formatPrice(values[0] ?? min)} to {formatPrice(values[1] ?? max)}\n      </FieldsetLegend>\n      <Slider\n        aria-label=\"Price range\"\n        className=\"flex-1\"\n        max={max}\n        min={min}\n        name=\"price-range\"\n        onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\n        value={values}\n      />\n    </Fieldset>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "slider"
  ],
  "type": "registry:block"
}