Slider

Los sliders son controles de entrada que permiten al usuario seleccionar uno o dos valores dentro de un rango definido. Para hacerlo, la persona arrastra uno o más indicadores sobre una línea horizontal.

Facilitan la exploración de valores reduciendo la necesidad de entrada manual. Se pueden usar principalmente para:

Ajustar niveles o cantidades, como volumen, brillo o tamaño.
Seleccionar valores dentro de un intervalo, como edad, distancia, precio.
Definir un rango mínimo y máximo cuando se necesitan dos límites.

Tipos

Single range (valor único): Permite seleccionar un único valor dentro de un rango definido.

Double range (rango doble): Permite seleccionar dos valores dentro de un rango definido.

Anatomía de un slider

Título de tab

Muestra el valor actual del slider de forma numérica. Acompaña al draghandle para dar retroalimentación inmediata durante la interacción.

Active
- HEX:
Inactive
- HEX:

Título de tab

Es el elemento interactivo que el usuario arrastra para cambiar el valor del slider.

Active
- HEX:
Inactive
- HEX:

Título de tab

Línea base sobre la que se desplaza el draghandle. Representa el rango total disponible.

Active
- HEX:
Inactive
- HEX:

Título de tab

Indicadores visuales que señalan divisiones del rango y ayudan a interpretar valores intermedios.

Basic
Text
Number

Cuándo no usar un slider:

Si se debe ingresar un valor exacto y largo.
Si el rango es muy amplio o desconocido.
Si el valor no es numérico u ordenable.

Caracteristica
Caracteristica
Caracteristica

Caracteristica
Caracteristica
Caracteristica

Table Header	Table Header	Table Header	Table Header
Content	Content	Content	Content
Content	Content	Content	Content

H2 título sección

H3 subtítulos sección

Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

Caracteristica
Caracteristica
Caracteristica

H2 título sección

H3 subtítulos sección

Descripción imagen

H2 título sección

H3 subtítulos sección

Descripción imagen