Slider
Desliza el slider dentro de un rango fijo.
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 rangees false | boolean | false |
| show-input-controls | si se muestran los botones de control cuandoshow-inputes 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 | — |
| 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 | — |
| 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 |
| persistent 2.9.5 | when slider tooltip inactive and persistent is false , tooltip will be destroyed. persistent always be false when show-tooltip is false | boolean | true |
| label a11y deprecated | native aria-label attribute | string | — |
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
ts
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]Fuente
Componentes • Style • Documentación
Contribuidores
