Ползунок

Ввод ползунком. Поддержка 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.