react-test/docs/pages/joy-ui/api/slider.json

{
  "props": {
    "aria-label": { "type": { "name": "string" } },
    "aria-valuetext": { "type": { "name": "string" } },
    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
    "color": {
      "type": {
        "name": "union",
        "description": "'danger'<br>&#124;&nbsp;'neutral'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
      },
      "default": "'primary'",
      "additionalInfo": { "joy-color": true }
    },
    "component": { "type": { "name": "elementType" } },
    "defaultValue": {
      "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
    },
    "disabled": { "type": { "name": "bool" }, "default": "false" },
    "disableSwap": { "type": { "name": "bool" }, "default": "false" },
    "getAriaLabel": {
      "type": { "name": "func" },
      "signature": { "type": "function(index: number) => string", "describedArgs": ["index"] }
    },
    "getAriaValueText": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(value: number, index: number) => string",
        "describedArgs": ["value", "index"]
      }
    },
    "isRtl": { "type": { "name": "bool" }, "default": "false" },
    "marks": {
      "type": {
        "name": "union",
        "description": "Array&lt;{ label?: node, value: number }&gt;<br>&#124;&nbsp;bool"
      },
      "default": "false"
    },
    "max": { "type": { "name": "number" }, "default": "100" },
    "min": { "type": { "name": "number" }, "default": "0" },
    "name": { "type": { "name": "string" } },
    "onChange": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: Event, value: number | Array<number>, activeThumb: number) => void",
        "describedArgs": ["event", "value", "activeThumb"]
      }
    },
    "onChangeCommitted": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent | Event, value: number | Array<number>) => void",
        "describedArgs": ["event", "value"]
      }
    },
    "orientation": {
      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
      "default": "'horizontal'"
    },
    "scale": {
      "type": { "name": "func" },
      "default": "function Identity(x) {\n  return x;\n}",
      "signature": { "type": "function(x: any) => any", "describedArgs": [] }
    },
    "shiftStep": { "type": { "name": "number" }, "default": "10" },
    "size": {
      "type": {
        "name": "union",
        "description": "'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;string"
      },
      "default": "'md'",
      "additionalInfo": { "joy-size": true }
    },
    "slotProps": {
      "type": {
        "name": "shape",
        "description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;object }"
      },
      "default": "{}"
    },
    "slots": {
      "type": {
        "name": "shape",
        "description": "{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }"
      },
      "default": "{}",
      "additionalInfo": { "slotsApi": true }
    },
    "step": { "type": { "name": "number" }, "default": "1" },
    "sx": {
      "type": {
        "name": "union",
        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
      },
      "additionalInfo": { "sx": true }
    },
    "tabIndex": { "type": { "name": "number" } },
    "track": {
      "type": {
        "name": "enum",
        "description": "'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false"
      },
      "default": "'normal'"
    },
    "value": {
      "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
    },
    "valueLabelDisplay": {
      "type": { "name": "enum", "description": "'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'" },
      "default": "'off'"
    },
    "valueLabelFormat": {
      "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
      "default": "function Identity(x) {\n  return x;\n}"
    },
    "variant": {
      "type": {
        "name": "union",
        "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
      },
      "default": "'solid'",
      "additionalInfo": { "joy-variant": true }
    }
  },
  "name": "Slider",
  "imports": ["import Slider from '@mui/joy/Slider';", "import { Slider } from '@mui/joy';"],
  "slots": [
    {
      "name": "root",
      "description": "The component that renders the root.",
      "default": "'span'",
      "class": "MuiSlider-root"
    },
    {
      "name": "track",
      "description": "The component that renders the track.",
      "default": "'span'",
      "class": "MuiSlider-track"
    },
    {
      "name": "rail",
      "description": "The component that renders the rail.",
      "default": "'span'",
      "class": "MuiSlider-rail"
    },
    {
      "name": "thumb",
      "description": "The component that renders the thumb.",
      "default": "'span'",
      "class": "MuiSlider-thumb"
    },
    {
      "name": "mark",
      "description": "The component that renders the mark.",
      "default": "'span'",
      "class": "MuiSlider-mark"
    },
    {
      "name": "markLabel",
      "description": "The component that renders the mark label.",
      "default": "'span'",
      "class": "MuiSlider-markLabel"
    },
    {
      "name": "valueLabel",
      "description": "The component that renders the value label.",
      "default": "'span'",
      "class": null
    },
    {
      "name": "input",
      "description": "The component that renders the input.",
      "default": "'input'",
      "class": null
    }
  ],
  "classes": [
    {
      "key": "active",
      "className": "Mui-active",
      "description": "State class applied to the thumb element if it's active.",
      "isGlobal": true
    },
    {
      "key": "disabled",
      "className": "Mui-disabled",
      "description": "State class applied to the root and thumb element if `disabled={true}`.",
      "isGlobal": true
    },
    {
      "key": "dragging",
      "className": "MuiSlider-dragging",
      "description": "State class applied to the root if a thumb is being dragged.",
      "isGlobal": false
    },
    {
      "key": "focusVisible",
      "className": "Mui-focusVisible",
      "description": "State class applied to the thumb element if keyboard focused.",
      "isGlobal": true
    },
    {
      "key": "markActive",
      "className": "MuiSlider-markActive",
      "description": "Class name applied to the mark element if active (depending on the value).",
      "isGlobal": false
    },
    {
      "key": "marked",
      "className": "MuiSlider-marked",
      "description": "Class name applied to the root element if `marks` is provided with at least one label.",
      "isGlobal": false
    },
    {
      "key": "markLabelActive",
      "className": "MuiSlider-markLabelActive",
      "description": "Class name applied to the mark label element if active (depending on the value).",
      "isGlobal": false
    },
    {
      "key": "trackFalse",
      "className": "MuiSlider-trackFalse",
      "description": "Class name applied to the root element if `track={false}`.",
      "isGlobal": false
    },
    {
      "key": "trackInverted",
      "className": "MuiSlider-trackInverted",
      "description": "Class name applied to the root element if `track=\"inverted\"`.",
      "isGlobal": false
    },
    {
      "key": "vertical",
      "className": "MuiSlider-vertical",
      "description": "Class name applied to the root element if `orientation=\"vertical\"`.",
      "isGlobal": false
    }
  ],
  "spread": false,
  "themeDefaultProps": true,
  "muiName": "JoySlider",
  "forwardsRefTo": "HTMLSpanElement",
  "filename": "/packages/mui-joy/src/Slider/Slider.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/joy-ui/react-slider/\">Slider</a></li></ul>",
  "cssComponent": false
}