滑桿

滑桿是一種 UI 元素，讓使用者沿著一個長條選取單一值或數值範圍。

useSlider API

Import

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

請閱讀這份關於最小化套件大小的指南，以了解它們之間的差異。

參數

名稱	類型	預設值	描述
aria-labelledby	string	-	包含滑桿標籤的元素 ID。
defaultValue	number \| ReadonlyArray<number>	-	預設值。當元件為非受控元件時使用。
disabled	boolean	false	若為 `true`，則元件為停用狀態。
disableSwap	boolean	false	若為 `true`，當拖曳另一個滑桿時，將游標移到作用中滑桿上方，作用中滑桿不會交換。
isRtl	boolean	false	若為 `true`，Slider 將會以從右至左的方式呈現（最小值在右側）。
marks	boolean \| ReadonlyArray<Mark>	false	刻度標記指示使用者可以將滑桿移動到的預定值。若為 `true`，則刻度標記會根據 `step` 屬性的值間隔排列。若為陣列，則應包含具有 `value` 和可選的 `label` 鍵的物件。
max	number	100	滑桿允許的最大值。不應等於最小值。
min	number	0	滑桿允許的最小值。不應等於最大值。
name	string	-	隱藏 `input` 元素的 Name 屬性。
onChange	(event: Event, value: number \| number[], activeThumb: number) => void	-	當滑桿的值變更時觸發的回呼函式。
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; }	轉換函式，用於更改滑桿的刻度。
shiftStep	number	10	當使用 Page Up/Page Down 或 Shift + 向上/向下箭頭時，滑桿可以逐步移動值的粒度。
step	number \| null	1	滑桿可以逐步移動值的粒度。（「離散」滑桿。）`min` 屬性作為有效值的原點。我們建議（max - min）可以被 step 整除。當 step 為 `null` 時，滑桿只能滑動到使用 `marks` 屬性提供的刻度標記上。
tabIndex	number	-	隱藏 `input` 元素的 Tab index 屬性。
value	number \| ReadonlyArray<number>	-	滑桿的值。對於範圍滑桿，請提供包含兩個值的陣列。

回傳值

名稱	類型	描述
active	number	滑桿的作用中索引。
axis	Axis	滑桿的方向。
axisProps	{ [key in Axis]: AxisProps<key> }	回傳 `offset` 和 `leap` 方法，以根據滑桿軸心計算定位樣式。
dragging	boolean	若為 `true`，則滑桿正在被拖曳。
focusedThumbIndex	number	滑桿上處於焦點的滑桿拇指的索引。
getHiddenInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>	隱藏 input slot 屬性的解析器。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>	根 slot 屬性的解析器。
getThumbProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>	滑桿拇指 slot 屬性的解析器。
getThumbStyle	(index: number) => object	滑桿拇指 slot 樣式屬性的解析器。
marks	Mark[]	滑桿的刻度標記。刻度標記指示使用者可以將滑桿移動到的預定值。
open	number	當處於 hover 狀態時，目前值的滑桿拇指索引。
range	boolean	若 `value` 屬性傳遞的是陣列，則若為 `true`，滑桿為範圍滑桿。
rootRef	React.RefCallback<Element> \| null	根 slot DOM 節點的 Ref。
trackLeap	number	滑桿目前值的軌跡間距。
trackOffset	number	滑桿目前值的軌跡偏移。
values	number[]	滑桿的可能值。