Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Campos de entrada

Elastic tug slider

Elastic tug slider: Un control deslizante que se estira como una banda elástica cuando se arrastra más allá de sus extremos, haciendo retroceder la pista con un rebote una vez soltado.

Cómo usar Elastic tug slider

Elastic tug slider se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

ControlTipoValor inicialLímites de la vista previa
valuenumber50De 0 a 100; paso 1
steppedbooleanfalseLos metadatos no indican otro límite.
accentcolor#F5C542Los metadatos no indican otro límite.
¿Para qué frameworks está disponible Elastic tug slider?

Elastic tug slider está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Elastic tug slider?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Elastic tug slider?

El código React de Elastic tug slider incluye: atributos y manejadores (aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, onKeyDown, tabIndex); roles explícitos (slider); comparaciones de teclas (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, PageDown, PageUp). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Elastic tug slider el movimiento reducido?

Elastic tug slider consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: reduced ? { stiffness: 700, damping: 44 } : { stiffness: 240, damping: 13 }. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Single value slider de Fieldbook, de la categoría Campos de entrada.
2791Single value sliderCampos de entradaUn control deslizante horizontal con un pulgar que se puede arrastrar y que llena la pista detrás de él para que el valor actual se lea de un vistazo.
Imagen fija del componente Vertical brightness slider de Fieldbook, de la categoría Campos de entrada.
2788Vertical brightness sliderCampos de entradaUn control deslizante alto que se llena de luz desde la parte inferior a medida que lo arrastras, resiste más allá de cada extremo y regresa al soltarlo.
Imagen fija del componente Auto Grow Textarea de Fieldbook, de la categoría Campos de entrada.
2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.
Imagen fija del componente Character budget counter de Fieldbook, de la categoría Campos de entrada.
2760Character budget counterCampos de entradaUn cuadro de redacción con una lectura de caracteres restantes que golpea un resorte y se calienta en color a medida que se agota el presupuesto.
Imagen fija del componente Focus ring text input de Fieldbook, de la categoría Campos de entrada.
2356Focus ring text inputCampos de entradaUn campo de texto de una sola línea con un marcador de posición silenciado y un anillo de acento sólido que aparece solo cuando está enfocado.
Imagen fija del componente Natural Language Date Field de Fieldbook, de la categoría Campos de entrada.
2389Natural Language Date FieldCampos de entradaUn campo de texto que lee frases como "en 2 días" o "el próximo viernes" como una fecha real, con una ventana emergente de calendario y una oración de vista previa en vivo debajo.