## Slider Desliza el slider dentro de un rango fijo. ### Uso básico El valor actual se muestra cuando se inicia el arrastre del slider. :::demo Personalice el valor inicial del slider configurando el valor vinculado. ```html ``` ::: ### Valores discretos Las opciones pueden ser discretas. :::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`. ```html ``` ::: ### Slider con input Inserte el valor a traves de un input :::demo Configure el atributo `show-input` para que muestre un input a la derecha. ```html ``` ::: ### Seleccion de rangos Se soporta la selección de un rango de valores. :::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite. ```html ``` ::: ### Modo Vertical :::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` . ```html ``` ::: ## Atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- | | min | valor minimo | 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 | | input-size | tamaño del input | string | large / medium / small / mini | small | | 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(value) | — | — | | range | si se usaran un rango | boolean | — | false | | vertical | modo vertical | boolean | — | false | | height | alto del Slider, requerido en modo vertical | string | — | — | | label | etiqueta para screen reader | string | — | — | | debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 | | tooltip-class | nombre personalizado de clase para el tooltip | string | — | — | ## Eventos | Nombre | Descripción | Parametros | | ------ | ---------------------------------------- | ------------------------ | | 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) | valor despues del cambio |