{
"props": {
"aria-label": { "type": { "name": "custom", "description": "string" } },
"aria-labelledby": { "type": { "name": "string" } },
"aria-valuetext": { "type": { "name": "custom", "description": "string" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"color": {
"type": {
"name": "union",
"description": "'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string"
},
"default": "'primary'"
},
"components": {
"type": {
"name": "shape",
"description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }"
},
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details."
},
"componentsProps": {
"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
| { children?: element, className?: string, open?: bool, style?: object, value?: node, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
},
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details."
},
"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"]
}
},
"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: Value, activeThumb: number) => void",
"describedArgs": ["event", "value", "activeThumb"]
}
},
"onChangeCommitted": {
"type": { "name": "func" },
"signature": {
"type": "function(event: React.SyntheticEvent | Event, value: Value) => 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": "'small'
| 'medium'
| string"
},
"default": "'medium'"
},
"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
| { children?: element, className?: string, open?: bool, style?: object, value?: node, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
"description": "{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }"
},
"default": "{}"
},
"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}"
}
},
"name": "Slider",
"imports": [
"import Slider from '@mui/material/Slider';",
"import { Slider } from '@mui/material';"
],
"classes": [
{
"key": "active",
"className": "Mui-active",
"description": "State class applied to the thumb element if it's active.",
"isGlobal": true
},
{
"key": "colorError",
"className": "MuiSlider-colorError",
"description": "Styles applied to the root element if `color=\"error\"`.",
"isGlobal": false
},
{
"key": "colorInfo",
"className": "MuiSlider-colorInfo",
"description": "Styles applied to the root element if `color=\"info\"`.",
"isGlobal": false
},
{
"key": "colorPrimary",
"className": "MuiSlider-colorPrimary",
"description": "Styles applied to the root element if `color=\"primary\"`.",
"isGlobal": false
},
{
"key": "colorSecondary",
"className": "MuiSlider-colorSecondary",
"description": "Styles applied to the root element if `color=\"secondary\"`.",
"isGlobal": false
},
{
"key": "colorSuccess",
"className": "MuiSlider-colorSuccess",
"description": "Styles applied to the root element if `color=\"success\"`.",
"isGlobal": false
},
{
"key": "colorWarning",
"className": "MuiSlider-colorWarning",
"description": "Styles applied to the root element if `color=\"warning\"`.",
"isGlobal": false
},
{
"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": "mark",
"className": "MuiSlider-mark",
"description": "Styles applied to the mark element.",
"isGlobal": false
},
{
"key": "markActive",
"className": "MuiSlider-markActive",
"description": "Styles applied to the mark element if active (depending on the value).",
"isGlobal": false
},
{
"key": "marked",
"className": "MuiSlider-marked",
"description": "Styles applied to the root element if `marks` is provided with at least one label.",
"isGlobal": false
},
{
"key": "markLabel",
"className": "MuiSlider-markLabel",
"description": "Styles applied to the mark label element.",
"isGlobal": false
},
{
"key": "markLabelActive",
"className": "MuiSlider-markLabelActive",
"description": "Styles applied to the mark label element if active (depending on the value).",
"isGlobal": false
},
{
"key": "rail",
"className": "MuiSlider-rail",
"description": "Styles applied to the rail element.",
"isGlobal": false
},
{
"key": "root",
"className": "MuiSlider-root",
"description": "Styles applied to the root element.",
"isGlobal": false
},
{
"key": "sizeSmall",
"className": "MuiSlider-sizeSmall",
"description": "Styles applied to the root element if `size=\"small\"`.",
"isGlobal": false
},
{
"key": "thumb",
"className": "MuiSlider-thumb",
"description": "Styles applied to the thumb element.",
"isGlobal": false
},
{
"key": "thumbColorError",
"className": "MuiSlider-thumbColorError",
"description": "Styles applied to the thumb element if `color=\"error\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorInfo",
"className": "MuiSlider-thumbColorInfo",
"description": "Styles applied to the thumb element if `color=\"info\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorPrimary",
"className": "MuiSlider-thumbColorPrimary",
"description": "Styles applied to the thumb element if `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorSecondary",
"className": "MuiSlider-thumbColorSecondary",
"description": "Styles applied to the thumb element if `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorSuccess",
"className": "MuiSlider-thumbColorSuccess",
"description": "Styles applied to the thumb element if `color=\"success\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorWarning",
"className": "MuiSlider-thumbColorWarning",
"description": "Styles applied to the thumb element if `color=\"warning\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbSizeSmall",
"className": "MuiSlider-thumbSizeSmall",
"description": "Styles applied to the thumb element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "track",
"className": "MuiSlider-track",
"description": "Styles applied to the track element.",
"isGlobal": false
},
{
"key": "trackFalse",
"className": "MuiSlider-trackFalse",
"description": "Styles applied to the root element if `track={false}`.",
"isGlobal": false
},
{
"key": "trackInverted",
"className": "MuiSlider-trackInverted",
"description": "Styles applied to the root element if `track=\"inverted\"`.",
"isGlobal": false
},
{
"key": "valueLabel",
"className": "MuiSlider-valueLabel",
"description": "Styles applied to the thumb label element.",
"isGlobal": false
},
{
"key": "valueLabelCircle",
"className": "MuiSlider-valueLabelCircle",
"description": "Styles applied to the thumb label's circle element.",
"isGlobal": false
},
{
"key": "valueLabelLabel",
"className": "MuiSlider-valueLabelLabel",
"description": "Styles applied to the thumb label's label element.",
"isGlobal": false
},
{
"key": "valueLabelOpen",
"className": "MuiSlider-valueLabelOpen",
"description": "Styles applied to the thumb label element if it's open.",
"isGlobal": false
},
{
"key": "vertical",
"className": "MuiSlider-vertical",
"description": "Styles applied to the root element if `orientation=\"vertical\"`.",
"isGlobal": false
}
],
"spread": true,
"themeDefaultProps": true,
"muiName": "MuiSlider",
"forwardsRefTo": "HTMLSpanElement",
"filename": "/packages/mui-material/src/Slider/Slider.js",
"inheritance": null,
"demos": "",
"cssComponent": false
}