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 が付与されます。