滑块

滑块是一种 UI 元素，允许用户沿条形选择单个值或值范围。

Slider API

导入

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

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

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
aria-label	字符串	-	滑块的标签。
aria-labelledby	字符串	-	包含滑块标签的元素的 ID。
aria-valuetext	字符串	-	一个字符串值，为滑块的当前值提供用户友好的名称。
defaultValue	Array<number> \| 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`，则 Slider 将从右到左渲染（最小值在右侧）。
marks	Array<{ label?: node, value: number }> \| bool	false	刻度线指示用户可以将滑块移动到的预定值。如果为 `true`，则刻度线根据 `step` prop 的值间隔排列。如果是一个数组，它应该包含带有 `value` 和一个可选的 `label` 键的对象。
max	数字	100	滑块允许的最大值。不应等于最小值。
min	数字	0	滑块允许的最小值。不应等于最大值。
name	字符串	-	隐藏 `input` 元素的 Name 属性。
onChange	函数	-	当滑块的值更改时触发的回调函数。签名：`function(event: Event, value: number \| Array, activeThumb: number) => void` `event` 回调的事件源。您可以通过访问 `event.target.value` (any) 来提取新值。警告：这是一个通用事件，而不是 change 事件。 `value` 新值。 `activeThumb` 当前移动的滑块的索引。
onChangeCommitted	函数	-	当 `mouseup` 触发时触发的回调函数。签名：`function(event: React.SyntheticEvent \| Event, value: number \| Array) => 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 + Arrow Up/Arrow Down 时，滑块可以步进值的粒度。
slotProps	{ input?: func \| object, mark?: func \| object, markLabel?: func \| object, rail?: func \| object, root?: func \| object, thumb?: func \| object, track?: func \| object, valueLabel?: any \| func }	{}	用于 Slider 内部每个 slot 的 props。
slots	{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }	{}	用于 Slider 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
step	数字	1	滑块可以步进值的粒度。（“离散”滑块。）`min` prop 用作有效值的原点。我们建议 (max - min) 可以被 step 整除。当 step 为 `null` 时，滑块只能滑动到 `marks` prop 提供的刻度线上。
tabIndex	数字	-	隐藏 `input` 元素的 Tab index 属性。
track	'inverted' \| 'normal' \| false	'normal'	track 的呈现方式 `normal` track 将渲染一个表示滑块值的条。 `inverted` track 将渲染一个表示剩余滑块值的条。 `false` track 将不渲染条。
value	Array<number> \| number	-	滑块的值。对于范围滑块，请提供一个包含两个值的数组。
valueLabelFormat	函数 \| string	function Identity(x) { return x; }	格式化值标签值的格式化函数。当提供一个函数时，它应该具有以下签名 - {number} value 要格式化的值标签的值 - {number} index 要格式化的值标签的索引

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Slider-root	`'span'`	渲染根元素的组件。
track	.base-Slider-track	`'span'`	渲染 track 的组件。
rail	.base-Slider-rail	`'span'`	渲染 rail 的组件。
thumb	.base-Slider-thumb	`'span'`	渲染 thumb 的组件。
mark	.base-Slider-mark	`'span'`	渲染 mark 的组件。
markLabel	.base-Slider-markLabel	`'span'`	渲染 mark label 的组件。
valueLabel			渲染 value label 的组件。
input		`'input'`	渲染 input 的组件。

CSS 类

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

类名	描述
.base--active	如果滑块元素处于活动状态，则应用于滑块元素的状态类。
.base--disabled	如果 `disabled={true}`，则应用于根元素和滑块元素的状态类。
.base--focusVisible	如果键盘聚焦，则应用于滑块元素的状态类。
.base-Slider-dragging	如果正在拖动滑块，则应用于根元素的状态类。
.base-Slider-markActive	如果刻度线元素处于活动状态（取决于值），则应用于刻度线元素的类名。
.base-Slider-marked	如果 `marks` 提供了至少一个标签，则应用于根元素的类名。
.base-Slider-markLabelActive	如果刻度线标签元素处于活动状态（取决于值），则应用于刻度线标签元素的类名。
.base-Slider-trackFalse	如果 `track={false}`，则应用于根元素的类名。
.base-Slider-trackInverted	如果 `track="inverted"`，则应用于根元素的类名。
.base-Slider-vertical	如果 `orientation="vertical"`，则应用于根元素的类名。