跳到内容跳到内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

滑块API

React 滑块组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

import Slider from '@mui/material/Slider';
// or
import { Slider } from '@mui/material';

阅读本指南，了解有关最小化包大小的差异。

属性

也提供原生组件的属性。

名称类型默认值描述
aria-labelstring-

滑块的标签。

aria-labelledbystring-

包含滑块标签的元素的 id。

aria-valuetextstring-

一个字符串值，为滑块的当前值提供用户友好的名称。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的CSS 类 API。

color'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'

组件的颜色。它同时支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。

components{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }{}

用于内部每个插槽的组件。

componentsProps{ 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' } }		{}

插槽组件的额外属性。您可以覆盖现有属性或添加新属性。

defaultValueArray<number>
| number		-

默认值。当组件不受控制时使用。

disabledboolfalse

如果为 true，则组件被禁用。

disableSwapboolfalse

如果为 true，则在拖动另一个滑块时，当指针移动到滑块上方时，活动滑块不会交换。

getAriaLabelfunc-

接受一个函数，该函数返回一个字符串值，为滑块的滑块标签提供用户友好的名称。这对屏幕阅读器用户很重要。

签名：function(index: number) => string
  • index 要格式化的滑块标签的索引。
getAriaValueTextfunc-

接受一个函数，该函数返回一个字符串值，为滑块的当前值提供用户友好的名称。这对屏幕阅读器用户很重要。

签名：function(value: number, index: number) => string
  • value 要格式化的滑块标签的值。
  • index 要格式化的滑块标签的索引。
marksArray<{ label?: node, value: number }>
| bool		false

标记指示用户可以将滑块移动到的预定值。如果为 true，则标记根据 step 属性的值间隔。如果是一个数组，它应该包含带有 value 和可选 label 键的对象。

maxnumber100

滑块允许的最大值。不应等于最小值。

minnumber0

滑块允许的最小值。不应等于最大值。

namestring-

隐藏 input 元素的 Name 属性。

onChangefunc-

当滑块的值更改时触发的回调函数。

签名：function(event: Event, value: Value, activeThumb: number) => void
  • event 回调的事件源。您可以通过访问 event.target.value（任何类型）来提取新值。警告：这是一个通用事件，而不是更改事件。
  • value 新值。
  • activeThumb 当前移动的滑块的索引。
onChangeCommittedfunc-

当 mouseup 被触发时触发的回调函数。

签名：function(event: React.SyntheticEvent | Event, value: Value) => void
  • event 回调的事件源。警告：这是一个通用事件，而不是更改事件。
  • value 新值。
orientation'horizontal'
| 'vertical'		'horizontal'

组件方向。

scalefuncfunction Identity(x) { return x; }

一个转换函数，用于更改滑块的刻度。

签名：function(x: any) => any
    shiftStepnumber10

    当使用 Page Up/Page Down 或 Shift + 向上/向下箭头时，滑块可以逐步遍历值的粒度。

    size'small'
    | 'medium'
    | string    		'medium'

    滑块的大小。

    slotProps{ 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' } }    		{}

    用于滑块内部每个插槽的属性。

    slots{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }{}

    用于滑块内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。

    stepnumber1

    滑块可以逐步遍历值的粒度。（“离散”滑块。）`min` 属性用作有效值的原点。我们建议 (max - min) 可以被步长均匀整除。
    当 step 为 null 时，滑块只能滑动到 `marks` 属性提供的标记上。

    sxArray<func
    | object
    | bool>
    | func
    | object    		-

    允许定义系统覆盖以及附加 CSS 样式的系统属性。

    有关更多详细信息，请参阅 `sx` 页面。

    tabIndexnumber-

    隐藏 input 元素的 Tab index 属性。

    track'inverted'
    | 'normal'
    | false    		'normal'

    轨道呈现方式

    • normal 轨道将渲染一个表示滑块值的条。
    • inverted 轨道将渲染一个表示剩余滑块值的条。
    • false 轨道将不渲染条。
    valueArray<number>
    | number    		-

    滑块的值。对于范围滑块，请提供一个包含两个值的数组。

    valueLabelDisplay'auto'
    | 'off'
    | 'on'    		'off'

    控制何时显示值标签

    • auto 当滑块被悬停或聚焦时，值标签将显示。
    • on 将持续显示。
    • off 将永不显示。
    valueLabelFormatfunc
    | string    		function Identity(x) { return x; }

    格式化值标签值的函数。
    当提供一个函数时，它应该具有以下签名
    - {number} value 要格式化的值标签的值 - {number} index 要格式化的值标签的索引

    ref 被转发到根元素。

    主题默认属性

    您可以使用 MuiSlider 通过主题更改此组件的默认属性。

    CSS 类

    这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会被应用到组件的插槽。

    类名规则名描述
    .Mui-active如果滑块元素处于活动状态，则应用于它的状态类。
    .Mui-disabled如果 disabled={true}，则应用于根元素和滑块元素的状态类。
    .Mui-focusVisible如果滑块元素获得键盘焦点，则应用于它的状态类。
    .MuiSlider-colorErrorcolorError如果 color="error"，则应用于根元素的样式。
    .MuiSlider-colorInfocolorInfo如果 color="info"，则应用于根元素的样式。
    .MuiSlider-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的样式。
    .MuiSlider-colorSecondarycolorSecondary如果 color="secondary"，则应用于根元素的样式。
    .MuiSlider-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的样式。
    .MuiSlider-colorWarningcolorWarning如果 color="warning"，则应用于根元素的样式。
    .MuiSlider-draggingdragging如果正在拖动滑块，则应用于根元素的状态类。
    .MuiSlider-markmark应用于标记元素的样式。
    .MuiSlider-markActivemarkActive如果标记元素处于活动状态（取决于值），则应用于它的样式。
    .MuiSlider-markedmarked如果 marks 提供了至少一个标签，则应用于根元素的样式。
    .MuiSlider-markLabelmarkLabel应用于标记标签元素的样式。
    .MuiSlider-markLabelActivemarkLabelActive如果标记标签元素处于活动状态（取决于值），则应用于它的样式。
    .MuiSlider-railrail应用于轨道元素的样式。
    .MuiSlider-rootroot应用于根元素的样式。
    .MuiSlider-sizeSmallsizeSmall如果 size="small"，则应用于根元素的样式。
    .MuiSlider-thumbthumb应用于滑块元素的样式。
    .MuiSlider-thumbColorErrorthumbColorError如果 color="error"，则应用于滑块元素的样式。
    .MuiSlider-thumbColorInfothumbColorInfo如果 color="info"，则应用于滑块元素的样式。
    .MuiSlider-thumbColorPrimarythumbColorPrimary如果 color="primary"，则应用于滑块元素的样式。
    .MuiSlider-thumbColorSecondarythumbColorSecondary如果 color="secondary"，则应用于滑块元素的样式。
    .MuiSlider-thumbColorSuccessthumbColorSuccess如果 color="success"，则应用于滑块元素的样式。
    .MuiSlider-thumbColorWarningthumbColorWarning如果 color="warning"，则应用于滑块元素的样式。
    .MuiSlider-thumbSizeSmallthumbSizeSmall如果 size="small"，则应用于滑块元素的样式。
    .MuiSlider-tracktrack应用于轨道元素的样式。
    .MuiSlider-trackFalsetrackFalse如果 track={false}，则应用于根元素的样式。
    .MuiSlider-trackInvertedtrackInverted如果 track="inverted"，则应用于根元素的样式。
    .MuiSlider-valueLabelvalueLabel应用于滑块标签元素的样式。
    .MuiSlider-valueLabelCirclevalueLabelCircle应用于滑块标签的圆形元素的样式。
    .MuiSlider-valueLabelLabelvalueLabelLabel应用于滑块标签的标签元素的样式。
    .MuiSlider-valueLabelOpenvalueLabelOpen如果滑块标签元素处于打开状态，则应用于它的样式。
    .MuiSlider-verticalvertical如果 orientation="vertical"，则应用于根元素的样式。

    您可以使用以下自定义选项之一覆盖组件的样式

    源代码

    如果您在此页面中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。