{
"props": {
"aria-label": { "type": { "name": "string" } },
"aria-valuetext": { "type": { "name": "string" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"color": {
"type": {
"name": "union",
"description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string"
},
"default": "'primary'",
"additionalInfo": { "joy-color": true }
},
"component": { "type": { "name": "elementType" } },
"defaultValue": {
"type": { "name": "union", "description": "Array<number>
| 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<{ label?: node, value: number }>
| 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, activeThumb: number) => void",
"describedArgs": ["event", "value", "activeThumb"]
}
},
"onChangeCommitted": {
"type": { "name": "func" },
"signature": {
"type": "function(event: React.SyntheticEvent | Event, value: number | Array) => void",
"describedArgs": ["event", "value"]
}
},
"orientation": {
"type": { "name": "enum", "description": "'horizontal'
| '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'
| 'md'
| 'lg'
| string"
},
"default": "'md'",
"additionalInfo": { "joy-size": true }
},
"slotProps": {
"type": {
"name": "shape",
"description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| 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<func
| object
| bool>
| func
| object"
},
"additionalInfo": { "sx": true }
},
"tabIndex": { "type": { "name": "number" } },
"track": {
"type": {
"name": "enum",
"description": "'inverted'
| 'normal'
| false"
},
"default": "'normal'"
},
"value": {
"type": { "name": "union", "description": "Array<number>
| number" }
},
"valueLabelDisplay": {
"type": { "name": "enum", "description": "'auto'
| 'off'
| 'on'" },
"default": "'off'"
},
"valueLabelFormat": {
"type": { "name": "union", "description": "func
| string" },
"default": "function Identity(x) {\n return x;\n}"
},
"variant": {
"type": {
"name": "union",
"description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| 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": "",
"cssComponent": false
}