{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-slider-23",
  "description": "Slider in form",
  "registryDependencies": [
    "@coss/button",
    "@coss/field",
    "@coss/fieldset",
    "@coss/form",
    "@coss/slider"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-slider-23.tsx",
      "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState<boolean>(false);\n  const [value, setValue] = useState<number | readonly number[]>([25, 75]);\n\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const volumes = formData.getAll(\"volume\");\n    alert(`Volume: ${volumes.join(\", \")}`);\n  };\n\n  return (\n    <Form onSubmit={onSubmit}>\n      <Fieldset className=\"flex max-w-none flex-col items-stretch gap-3\">\n        <Field>\n          <Slider name=\"volume\" onValueChange={setValue} value={value}>\n            <div className=\"mb-2 flex items-center justify-between gap-1\">\n              <FieldsetLegend>Volume</FieldsetLegend>\n              <SliderValue />\n            </div>\n          </Slider>\n          <FieldDescription>Choose a value between 0 and 100</FieldDescription>\n        </Field>\n      </Fieldset>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "slider",
    "form"
  ],
  "type": "registry:block"
}