{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "slider-orientation-example",
  "title": "Slider Orientation",
  "description": "slider-orientation-example",
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/slider"
  ],
  "files": [
    {
      "path": "src/components/examples/controls/slider/slider-orientation-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Description, Label } from '@/components/ui/field'\nimport { Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack } from '@/components/ui/slider'\n\nconst bands = [\n  '32 Hz',\n  '64 Hz',\n  '125 Hz',\n  '250 Hz',\n  '500 Hz',\n  '1 kHz',\n  '2 kHz',\n  '4 kHz',\n  '8 kHz',\n  '16 kHz',\n]\n\nexport default function SliderOrientationDemo() {\n  const [eq, setEq] = useState<number[]>([0, 0, 0, 0, 0, 0, 0, 0, 0, 0])\n  return (\n    <div className=\"grid grid-cols-5 justify-items-center gap-2 sm:grid-cols-10 sm:gap-6\">\n      {eq.map((v, i) => (\n        <Slider\n          key={i}\n          orientation=\"vertical\"\n          value={v}\n          onChange={(n) => setEq((prev) => prev.map((x, idx) => (idx === i ? (n as number) : x)))}\n          minValue={-12}\n          maxValue={12}\n          step={1}\n          formatOptions={{ maximumFractionDigits: 0 }}\n        >\n          <div className=\"mb-2 flex flex-col items-center justify-between\">\n            <SliderOutput />\n            <Label className=\"sr-only\">{bands[i]}</Label>\n          </div>\n          <div className=\"h-48\">\n            <SliderTrack className=\"h-full w-10\">\n              <SliderFill />\n              <SliderThumb />\n            </SliderTrack>\n          </div>\n          <Description>dB</Description>\n        </Slider>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/slider-orientation-example/page.tsx"
    }
  ],
  "type": "registry:page"
}