Slider

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

useSlider API

导入

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

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

参数

名称	类型	默认	描述
aria-labelledby	string	-	包含 slider 标签的元素的 ID。
defaultValue	number \| ReadonlyArray<number>	-	默认值。当组件不受控时使用。
disabled	boolean	false	如果为 `true`，则组件被禁用。
disableSwap	boolean	false	如果为 `true`，当拖动另一个滑块时，将指针移动到某个滑块上时，活动滑块不会交换。
isRtl	boolean	false	如果为 `true`，Slider 将从右到左渲染（最小值在右侧）。
marks	boolean \| ReadonlyArray<Mark>	false	Marks 指示用户可以将 slider 移动到的预定值。如果为 `true`，则 marks 根据 `step` prop 的值间隔。如果是一个数组，则应包含带有 `value` 和可选 `label` 键的对象。
max	number	100	slider 允许的最大值。不应等于 min。
min	number	0	slider 允许的最小值。不应等于 max。
name	string	-	隐藏 `input` 元素的 Name 属性。
onChange	(event: Event, value: number \| number[], activeThumb: number) => void	-	当 slider 的值更改时触发的回调函数。
onChangeCommitted	(event: React.SyntheticEvent \| Event, value: number \| number[]) => void	-	当 `mouseup` 触发时触发的回调函数。
orientation	'horizontal' \| 'vertical'	'horizontal'	组件方向。
rootRef	React.Ref<Element>	-	附加到 Slider 根部的 ref。
scale	(value: number) => number	function Identity(x) { return x; }	一个转换函数，用于更改 slider 的比例。
shiftStep	number	10	当使用 Page Up/Page Down 或 Shift + Arrow Up/Arrow Down 时，slider 可以逐步遍历值的粒度。
step	number \| null	1	slider 可以逐步遍历值的粒度。（“离散” slider。）`min` prop 用作有效值的原点。我们建议 (max - min) 可以被 step 整除。当 step 为 `null` 时，滑块只能滑动到 `marks` prop 提供的 marks 上。
tabIndex	number	-	隐藏 `input` 元素的 Tab index 属性。
value	number \| ReadonlyArray<number>	-	slider 的值。对于范围 slider，请提供一个包含两个值的数组。

返回值

名称	类型	描述
active	number	slider 的活动索引。
axis	Axis	slider 的方向。
axisProps	{ [key in Axis]: AxisProps<key> }	返回 `offset` 和 `leap` 方法，以根据 slider 轴计算定位样式。
dragging	boolean	如果为 `true`，则 slider 正在被拖动。
focusedThumbIndex	number	滑块上聚焦的滑块的索引。
getHiddenInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>	隐藏 input slot 的 props 的解析器。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>	root slot 的 props 的解析器。
getThumbProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>	thumb slot 的 props 的解析器。
getThumbStyle	(index: number) => object	thumb slot 的 style prop 的解析器。
marks	Mark[]	slider 的 marks。Marks 指示用户可以将 slider 移动到的预定值。
open	number	悬停状态下当前值的滑块索引。
range	boolean	如果为 `true`，当传递的 `value` prop 是一个数组时，slider 是一个范围 slider。
rootRef	React.RefCallback<Element> \| null	root slot 的 DOM 节点的 Ref。
trackLeap	number	slider 当前值的 track leap。
trackOffset	number	slider 当前值的 track offset。
values	number[]	slider 的可能值。