{
  "name": "Slider",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Slider.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "slider",
  "elName": "Slider",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#slider",
  "hasLiveDemo": false,
  "description": "Numeric slider with paired value readout — the kit's standard \"creativity\",\n\"temperature\", \"weight\" control. Drop-in: works uncontrolled with\n`defaultValue`; controlled via `value` + `onValueChange`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "Slider",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SliderProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { Slider } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "number",
      "doc": "Controlled numeric value."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "number",
      "doc": "Uncontrolled initial value."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: number) => void",
      "doc": "Higher-level change handler — fires with the parsed number."
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(e: ChangeEvent<HTMLInputElement>) => void",
      "doc": "Native onChange — still fires alongside `onValueChange`."
    },
    {
      "name": "min",
      "optional": true,
      "type": "number",
      "doc": "Slider min. Default `0`."
    },
    {
      "name": "max",
      "optional": true,
      "type": "number",
      "doc": "Slider max. Default `1`."
    },
    {
      "name": "step",
      "optional": true,
      "type": "number",
      "doc": "Step. Default `0.1`."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional visible label rendered above the track."
    },
    {
      "name": "formatValue",
      "optional": true,
      "type": "(value: number) => string",
      "doc": "Optional value formatter (default `String(value)`)."
    },
    {
      "name": "hideValue",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the trailing numeric readout. Default `false`."
    }
  ],
  "classesUsed": [
    "slider",
    "slider-head",
    "slider-input",
    "slider-label",
    "slider-value"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"slider\">\n  <div class=\"slider-head\">\n    <label class=\"slider-label\" for=\"slider-demo\">Creativity</label>\n    <span class=\"slider-value\">0.7</span>\n  </div>\n  <input id=\"slider-demo\" type=\"range\" class=\"slider-input\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.7\">\n</div>",
    "css": ".slider { display: flex; flex-direction: column; gap: 6px; }\n\n.slider-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-3);\n}\n\n.slider-input {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 4px;\n  border-radius: 999px;\n  background: var(--bg-warm);\n  outline: none;\n  margin: 6px 0;\n}\n\n.slider-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.slider-value {\n  font: 500 12.5px/1 var(--f-mono);\n  color: var(--fg-soft);\n  font-variant-numeric: tabular-nums;\n}"
  }
}