Slider 滑桿

讓使用者在給定範圍內選擇數值的輸入組件。

基本用法

基本滑桿

基本滑桿

值：50

範圍滑桿

範圍滑桿

值：25 - 75

不同尺寸

不同尺寸

小：

默認：

大：

不同顏色

不同顏色

一般：

主要：

次要：

成功：

警告：

危險：

帶提示框

帶提示框

值：40

40%

垂直滑桿

垂直滑桿

值：80

帶標記

帶標記

值：50

0%

25%

50%

75%

100%

API

屬性

屬性名	說明	類型	默認值
modelValue	當前滑桿值	number[]	-
min	最小值	number	0
max	最大值	number	100
step	步進間隔	number	1
size	滑桿尺寸	'small' | 'default' | 'large'	'default'
color	滑桿顏色	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'
orientation	滑桿方向	'horizontal' | 'vertical'	'horizontal'
disabled	是否禁用	boolean	false
showTooltip	是否顯示提示框	boolean	false
formatTooltip	自定義提示框格式	(value: number) => string	-
showMarks	是否顯示標記	boolean	false
marks	標記配置	Record<number, string>	-

事件 Events

事件名	說明	回調參數
update:modelValue	滑桿值變化時觸發	(value: number[])
valueCommit	滑桿值確定時觸發	(value: number[])

插槽 Slots

插槽名	說明	參數
default	自定義內容	-
tooltip	自定義提示框內容	{ value: number, index: number }
mark	自定義標記內容	{ value: number, label: string }