滑动选择器 Slider

这个组件让我莫名其妙地想到了滑动变阻器，和这段音乐。😂

基础使用

传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Controlled

Uncontrolled

隐藏源代码

范围选择

range 属性可开启范围选择。

隐藏源代码

数值范围、步长、精度

min 和 max 设置数值范围。step 设置步长，为 0 时不限制步长。

precision 参数控制数值最小精度，取值为 [0, 100] 的整数，为 null 时不限制最小精度。

设置 precision 参数主要是为了处理 JS 浮点数计算中因精度丢失产生的非预期近似值。

隐藏源代码

只读 & 禁用

readonly 设置只读，disabled 设置禁用。它们之间几乎只有样式不一样。

隐藏源代码

标记点

marks 设置标记点，设置 step 为 'mark' 时仅支持选择标记点的数值。

隐藏源代码

标签渲染

mark 插槽自定义标记点的标签渲染。

隐藏源代码

垂直方向

direction 设置滑动选择器方向，垂直时高度默认为容器高度，你也可以自己设置高度。

隐藏源代码

轨道反转

direction 设置滑动选择器方向，垂直时高度默认为容器高度，你也可以自己设置高度。

隐藏源代码

滑块标识

可以使用 thumb、thumb-start、thumb-end 插槽自定义滑块中的内容。

L

R

隐藏源代码

API

SliderProps

属性	类型	可选	默认值	描述	版本
modelValue	number | [number, number] | null	是		滑动选择器的值（受控模式），支持 v-model。	0.0.3
defaultValue	number | [number, number] | null	是		滑动选择器的默认值（非受控模式）。	0.0.3
min	number	是	0	滑动选择器的最小值（闭区间）。	0.0.3
max	number	是	100	滑动选择器的最大值（闭区间）。	0.0.3
range	boolean	是	false	范围选择。	0.0.3
disabled	boolean	是	false	禁用状态。	0.0.3
readonly	boolean	是	false	只读状态。	0.0.3
step	number | 'mark'	是	1	数值的步长。	0.0.3
marks	(number | { value: number; label?: string })[]	是		滑动选择器的标记点。	0.0.3
direction	'horizontal' | 'vertical'	是	'horizontal'	滑动选择器的方向。	0.0.3
reverse	boolean	是	false	是否反转轨道。	0.0.3
precision	number | null	是	8	数值最小精度，取值为 [0, 100] 的整数，为 null 时不限制。	0.0.3
tooltip	boolean	是	true	是否开启文本提示。	0.0.3
tooltipProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	是		单值模式时，文本提示 Tooltip 组件的属性。	0.0.3
tooltipStartProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	是		范围选择模式时，第一个文本提示 Tooltip 组件的属性。	0.0.3
tooltipEndProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	是		范围选择模式时，第二个文本提示 Tooltip 组件的属性。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

SliderEvents

事件	参数	描述	版本
update:modelValue	value: number | [number, number]	更新 modelValue 的回调。	0.0.3
change	value: number | [number, number]	数值变动的回调。	0.0.3
dragStart	event: MouseEvent | TouchEvent	开始拖拽的回调。	0.0.3
dragEnd	event: MouseEvent | TouchEvent	结束拖拽的回调。	0.0.3
markSelect	value: number, event: MouseEvent	选择标记点的回调。	0.0.3
focus	event: FocusEvent	聚焦滑动选择器的回调。	0.0.3
focus	event: FocusEvent	聚焦滑动选择器的回调。	0.0.3

SliderSlots

插槽	参数	描述	版本
mark	value: number, label: string | undefined	标记点标签的渲染。	0.0.3
thumb		单值模式时，滑块的内容。	0.0.3
thumb-start		范围选择模式时，第一个滑块的内容。	0.0.3
thumb-end		范围选择模式时，第二个滑块的内容。	0.0.3
tooltip-content	value: number	文本提示的内容。	0.0.3

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}