Slider

Desliza el slider dentro de un rango fijo.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

El valor actual se muestra cuando se inicia el arrastre del slider.

Valores discretos

Las opciones pueden ser discretas.

Slider con input

Establecer valor a través de una casilla de entrada.

Tamaños

Posición

Puede personalizar el posicionamiento del tooltip.

Selección de rangos

La selección de un rango de valores es soportado.

Modo Vertical

Mostrar marcas

API

Atributos

Nombre	Descrición	Tipo	Default
model-value / v-model	valor vinculado	`number` / `object`	0
min	valor mínimo	`number`	0
max	valor máximo	`number`	100
disabled	si el Slider esta deshabitado	`boolean`	false
step	tamaño del paso	`number`	1
show-input	Si se muestra el input, trabaja cuando `range`es false	`boolean`	false
show-input-controls	si se muestran los botones de control cuando`show-input`es true	`boolean`	true
size	el tamaño del envoltorio del slider no funcionará en modo vertical	`enum`	default
input-size	tamaño del input, cuando se establece `size`, el valor por defecto es `size`	`enum`	default
show-stops	si se muestran los puntos de ruptura (breakpoints)	`boolean`	false
show-tooltip	si se muestra el valor en un tooltip	`boolean`	true
format-tooltip	formato para mostrar el valor del tooltip	`Function`	—
range	si se usaran un rango	`boolean`	false
vertical	modo vertical	`boolean`	false
height	slider height, required in vertical mode	`string`	—
label a11y deprecated	native `aria-label` attribute	`string`	—
aria-label a11y 2.7.2	native `aria-label` attribute	`string`	—
range-start-label	cuando `range` es true, etiqueta el lector de pantalla hacia el inicio del rango	`string`	—
range-end-label	cuando `range` es true, etiqueta el lector de pantalla hacia el final del rango	`string`	—
format-value-text	formato para mostrar el atributo `aria-valuenow` para lectores de pantalla	`Function`	—
debounce	retardo al escribir, en milisegundos, funciona cuando`show-input` es true.	`number`	300
tooltip-class	nombre personalizado de clase para el tooltip	`string`	—
placement	posición del Tooltip	`enum`	top
marks	marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado `[min, max]`, cada marca puede tener estilo personalizado	`object`	—
validate-event	si se debe activar la validación del formulario	`boolean`	true

Eventos

Nombre	Descripción	Type
change	se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)	`Function`
input	se dispara cuando los datos cambian (se emitirá en tiempo real durante el deslizamiento)	`Function`

Type Declarations

Show declarations

type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]

Fuente

Componentes • Documentación

Contribuidores

Virtualized Select

Switch

Slider #

Uso básico #

Valores discretos #

Slider con input #

Tamaños #

Posición #

Selección de rangos #

Modo Vertical #

Mostrar marcas #

API #

Atributos #

Eventos #

Type Declarations #

Fuente #

Contribuidores #