Sistema de diseño
Slider
Herramienta visual interactiva que permite a los usuarios seleccionar un valor dentro de un rango específico mediante un control deslizante.
Figma
Storybook
AEM
Overview
Este componente es comúnmente utilizado en interfaces de usuario para ajustar valores numéricos, como el volumen de audio, el brillo de la pantalla, o para filtrar resultados en una lista.
En un sistema de diseño generalmente incluye los siguientes elementos: barra deslizante, controles, valores numéricos, feedback visual...
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
El componente slider tiene variantes de tipo y estado.
Tipo de slider
Puede funcionar de dos maneras: ajustando un valor único o definiendo un rango mediante la selección de dos valores.
Estado
Al igual que otros componentes del sistema, el slider tiene dos variantes de estado: Default y Disabled.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
El componente ofrece varias opciones de configuración para adaptarse a diferentes diseños de producto y requisitos de cada sitio. Estas opciones permiten personalizar el slider para que se ajuste a diversas necesidades y contextos de uso
Detail
Por defecto está visible, pero el diseñador podrá decidir si quiere o no que su slider marque los detalles numéricos mínimos y máximos con los que está configurado.
Tooltip
El diseñador puede optar por incluir un tooltip en el componente para que los usuarios vean claramente el valor exacto en el que se encuentra el control.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Drag
El usuario puede arrastrar el control deslizante para marcar un valor específico.
Step
El step se puede configurar a la hora de desarrollarlo, para que se mueva de 10 en 10, 20 en 20 o la configuración que se crea oportuna.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes