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 레이아웃 단축 속성	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	(val)
change	값이 변경될 때 발생	(val)

접근성

슬라이더 핸들은 role="slider" + aria-valuemin/max/now입니다. LhFormItem 내에서 유효성 검사에 실패하면 aria-invalid가 부여됩니다.