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

滑块API

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

示例

导入

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

阅读这份关于最小化 bundle 大小的指南，了解它们之间的区别。

属性

名称类型默认值描述
aria-label字符串-

滑块的标签。

aria-valuetext字符串-

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

classes对象-

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

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

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| 字符串		'primary'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加自己的颜色，请查看主题组件——扩展颜色。

component元素类型-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

defaultValueArray<number>
| 数字		-

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

disabled布尔值false

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

disableSwap布尔值false

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

getAriaLabel函数-

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

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

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

签名:function(value: number, index: number) => string
  • value 要格式化的滑块标签的值。
  • index 要格式化的滑块标签的索引。
isRtl布尔值false

如果为 true，滑块将从右到左渲染（最小值在右侧）。

marksArray<{ label?: node, value: number }>
| 布尔值		false

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

max数字100

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

min数字0

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

name字符串-

隐藏 input 元素的 Name 属性。

onChange函数-

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

签名:function(event: Event, value: number | Array<number>, activeThumb: number) => void
  • event 回调的事件源。您可以通过访问 event.target.value (any) 来获取新值。警告：这是一个通用事件，而不是 change 事件。
  • value 新值。
  • activeThumb 当前移动的滑块的索引。
onChangeCommitted函数-

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

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

组件方向。

scale函数function Identity(x) { return x; }

一个转换函数，用于更改滑块的比例。

签名:function(x: any) => any
    shiftStep数字10

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

    size'sm'
    | 'md'
    | 'lg'
    | 字符串    		'md'

    组件的尺寸。它接受 'sm' 和 'lg' 之间的主题值。

    要了解如何向组件添加自定义尺寸，请查看主题组件——扩展尺寸。

    slotProps{ input?: 函数
    | 对象, mark?: 函数
    | 对象, markLabel?: 函数
    | 对象, rail?: 函数
    | 对象, root?: 函数
    | 对象, thumb?: 函数
    | 对象, track?: 函数
    | 对象, valueLabel?: 函数
    | 对象 }    		{}

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

    slots{ input?: 元素类型, mark?: 元素类型, markLabel?: 元素类型, rail?: 元素类型, root?: 元素类型, thumb?: 元素类型, track?: 元素类型, valueLabel?: 元素类型 }{}

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

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

    step数字1

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

    sxArray<函数
    | 对象
    | 布尔值>
    | 函数
    | 对象    		-

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

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

    tabIndex数字-

    隐藏 input 元素的 Tab index 属性。

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

    轨道呈现

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

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

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

    控制何时显示值标签

    • auto 当滑块被悬停或聚焦时，值标签将显示。
    • on 将持久显示。
    • off 永远不会显示。
    valueLabelFormat函数
    | 字符串    		function Identity(x) { return x; }

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

    variant'outlined'
    | 'plain'
    | 'soft'
    | 'solid'
    | 字符串    		'solid'

    要使用的全局变体。

    要了解如何添加自己的变体，请查看主题组件——扩展变体。

    ref 被转发到根元素。

    主题默认属性

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

    插槽

    要了解如何自定义插槽，请查看覆盖组件结构指南。

    插槽名称类名默认组件描述
    根.MuiSlider-root'span'渲染根的组件。
    track.MuiSlider-track'span'渲染轨道的组件。
    轨道.MuiSlider-rail'span'渲染轨道的组件。
    滑块.MuiSlider-thumb'span'渲染滑块的组件。
    标记.MuiSlider-mark'span'渲染标记的组件。
    标记标签.MuiSlider-markLabel'span'渲染标记标签的组件。
    值标签'span'渲染值标签的组件。
    输入'input'渲染输入的组件。

    CSS 类

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

    类名规则名称描述
    .Mui-active如果滑块元素处于活动状态，则应用于它的状态类。
    .Mui-disabled如果 disabled={true}，则应用于根元素和滑块元素的状态类。
    .Mui-focusVisible如果键盘聚焦，则应用于滑块元素的状态类。
    .MuiSlider-dragging拖动如果正在拖动滑块，则应用于根元素的状态类。
    .MuiSlider-markActive标记活动如果标记处于活动状态（取决于值），则应用于标记元素的类名。
    .MuiSlider-marked已标记如果 marks 提供了至少一个标签，则应用于根元素的类名。
    .MuiSlider-markLabelActive标记标签活动如果标记标签处于活动状态（取决于值），则应用于标记标签元素的类名。
    .MuiSlider-trackFalse轨道False如果 track={false}，则应用于根元素的类名。
    .MuiSlider-trackInverted轨道反转如果 track="inverted"，则应用于根元素的类名。
    .MuiSlider-vertical垂直如果 orientation="vertical"，则应用于根元素的类名。

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

    源代码

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