Deslizador

Entrada deslizante. Admite min/max/step, el modo de dos controles range, las marcas de escala con marks, la visualización numérica con showInput, tres tamaños y la deshabilitación; admite el arrastre con el ratón y con la pantalla táctil.

Deslizador

<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: dos controles: {{ JSON.stringify(ranged) }}</p>
    </div>
    <div>
      <LhSlider v-model="marked" :min="0" :max="100" :marks="marks" />
      <p class="demo-note">marks: marcas de escala: {{ marked }}</p>
    </div>
    <div>
      <LhSlider v-model="single" size="small" />
      <LhSlider v-model="single" disabled />
      <p class="demo-note">size="small" y disabled</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 35,
    ranged: [20, 60],
    marked: 40,
    marks: { 0: 'Inicio del trazo', 50: 'Desarrollo del trazo', 100: 'Cierre del trazo' },
  }),
}
</script>

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valor enlazado; con range, [start, end] (model: modelValue/input)	number \| [number, number] \| null	—
min	Valor mínimo	number	0
max	Valor máximo	number	100
step	Valor del incremento	number	1
range	Modo de dos controles	boolean	false
marks	Marcas de escala { value: label }	Record<number, string>	—
showInput	Mostrar el texto del valor numérico	boolean	false
size	Tamaño (altura de la pista)	'small' \| 'medium' \| 'large'	'medium'
disabled	Deshabilitar	boolean	false
sx	Propiedad de diseño rápido sx	—	—

Eventos

Evento	Descripción	Parámetro de callback
input	Evento de v-model	(val)
change	Se dispara al cambiar el valor	(val)

Accesibilidad

El control del deslizador usa role="slider" + aria-valuemin/max/now; colocado dentro de LhFormItem, adquiere aria-invalid si falla la validación.