# Slider Permite elegir un valor numérico dentro de un rango continuo o discreto. Es preferible cuando la precisión exacta no importa tanto como la dirección y la magnitud relativa. ```tsx import { Slider } from "@/components/ui/slider"; ``` ## Default ### Cuándo usar - Ajustes continuos como volumen, zoom u opacidad. - Rangos numéricos cortos donde la magnitud es intuitiva. - Cuando un input numérico te resulta excesivo para el dato. ### Cuándo no usarlo - Si necesitas precisión exacta: usa un input numérico. - Si solo hay dos o tres valores: usa Radio o Switch. ## Pasos ### Slider discreto Usa `step` y `showMarkers` cuando el dominio tiene incrementos significativos: una escala de 1 a 5, porcentajes de 10 en 10, etc. ```tsx ``` ## Deshabilitado ### Estado bloqueado Cuando el ajuste no aplica en el contexto actual, deshabilita el slider y muestra una explicación cercana de por qué. ```tsx ``` ## Accesibilidad ### Teclado y roles - Radix renderiza role="slider" con aria-valuenow, aria-valuemin y aria-valuemax. - Flechas izquierda y derecha mueven uno o un step; Home y End van al mínimo y al máximo. - El slider necesita un label visible o aria-labelledby. - Acompaña con un texto que muestre el valor actual en vivo. ## Contenido ### Etiquetas de los extremos - Si la escala no es obvia, anota los extremos: Bajo y Alto, 0 y 100. - Una a tres palabras por extremo. - Muestra el valor seleccionado cerca del slider, no en un tooltip que aparece y desaparece.