Slider 滑桿

滑桿輸入。支援 min/max/step、range 雙滑桿、marks 刻度標記、showInput 數值顯示、三檔尺寸與停用；支援滑鼠拖曳與觸控螢幕。

滑桿

<template>
  <div class="demo-col" style="max-width: 520px; gap: 26px">
    <div>
      <LhSlider v-model="single" :min="0" :max="100" :step="5" show-input />
      <p class="demo-note">min=0 max=100 step=5 showInput：{{ single }}</p>
    </div>
    <div>
      <LhSlider v-model="ranged" range :min="10" :max="90" :step="10" />
      <p class="demo-note">range 雙滑桿：{{ JSON.stringify(ranged) }}</p>
    </div>
    <div>
      <LhSlider v-model="marked" :min="0" :max="100" :marks="marks" />
      <p class="demo-note">marks 刻度標記：{{ marked }}</p>
    </div>
    <div>
      <LhSlider v-model="single" size="small" />
      <LhSlider v-model="single" disabled />
      <p class="demo-note">size="small" 與 disabled</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 35,
    ranged: [20, 60],
    marked: 40,
    marks: { 0: '起筆', 50: '行筆', 100: '收筆' },
  }),
}
</script>

Props

屬性	說明	類型	預設值
v-model	綁定值；range 時為 [start, end]（model: modelValue/input）	number \| [number, number] \| null	—
min	最小值	number	0
max	最大值	number	100
step	步進值	number	1
range	雙滑桿模式	boolean	false
marks	刻度標記 { value: label }	Record<number, string>	—
showInput	顯示數值文字	boolean	false
size	尺寸（軌道高度）	'small' \| 'medium' \| 'large'	'medium'
disabled	停用	boolean	false
sx	sx 快速佈局屬性	—	—

Events

事件	說明	回呼參數
input	v-model 事件	(val)
change	值變化時觸發	(val)

無障礙

滑桿按鈕為 role="slider" + aria-valuemin/max/now；置於 LhFormItem 內校驗失敗時 aria-invalid。