Entrada nativa de rango dual

• @stanko/dual-range-input es una biblioteca de entrada nativa de rango dual que usa dos entradas nativas de rango de HTML.
  • Usa entradas nativas para conservar todas las interacciones predeterminadas y las funciones de accesibilidad.
  • Está compuesta por unas 50 líneas de JavaScript y CSS.
• Por qué es necesaria
  • Se usa una interfaz para ajustar parámetros en una herramienta de dibujo generativo, y se necesitan deslizadores mínimo y máximo.
  • Las soluciones existentes dependen de JavaScript y reimplementan las funciones de arrastre y accesibilidad.
  • Debe usar entradas nativas de rango de HTML y, al hacer clic en la pista, el deslizador más cercano debe moverse a ese valor.
• Cómo funciona
  • Dos entradas se colocan una junto a la otra y, cuando cambian, se calcula el punto medio entre ambos valores.
  • Se establecen las propiedades mínima y máxima en el punto medio, y se actualiza el ancho de las entradas.
• Cambio de tamaño de las entradas
  • Al calcular el ancho de las entradas, hay que considerar que la pista es más corta que el ancho real de la entrada.
  • El cálculo se simplifica agregando el ancho del pulgar al ancho de la entrada.
  • Se añade padding al contenedor de la entrada para dar cabida al ancho adicional del pulgar.
• Mover el pulgar al hacer clic
  • Las entradas se redimensionan para encontrarse en el punto medio, y al hacer clic el pulgar más cercano se mueve a ese valor.
  • Si se activa el modo de depuración, es fácil ver el punto medio.
• Estilos
  • Se puede usar CSS para dar estilo a las entradas de rango.
  • Dar estilo a la pista y al pulgar es sencillo, y se elimina el radio del borde en la parte central donde se unen las pistas.
• Tema
  • Se exponen varias variables para poder cambiar el tema fácilmente.
  • Se proporcionan valores predeterminados y se pueden crear temas redefiniendo las variables.
• Gradiente
  • Se usa un gradiente de CSS para pintar el rango seleccionado.
  • El gradiente se configura con la variable --dri-gradient-position y se actualiza en el código junto con el ancho.
• Conclusión
  • Esta publicación busca ordenar ideas y espera inspirar a probar el uso de elementos nativos.

[GN⁺]

Opiniones de Hacker News

• La parte central del slider siempre debería poder moverse, y debería ser posible mover ambos controles al mismo tiempo, como en el ejemplo de Unity.
• El autor hizo el slider para sus propias ilustraciones generativas y prefiere arrastrarlo para ver los cambios en la imagen en lugar de ingresar números.
• Hay un bug en el que, después de configurar el slider en 100-100, no se puede cambiar a 99-99, y este problema ocurre fácilmente en los extremos del slider.
• Considera que hace falta una implementación de valores dobles en HTML <input type=range>, y en Firefox hay un bug donde el valor cambia de a un paso cuando se hace clic en el control.
• Un pasante creó un POC similar en el sistema de diseño de la empresa, pero hubo un problema de saltos en los valores de entrada, y otro pasante propuso una solución con rangos de entrada superpuestos.
• El término "nativo" puede prestarse a debate, y considera que si se necesita JavaScript, entonces ya no es nativo.
• Usó React para implementar cierta funcionalidad, pero tuvo dificultades porque no domina el desarrollo frontend.
• Usó el slider de jQuery UI, pero tuvo que agregar jQuery y jQuery UI solo para un único slider.
• Puede funcionar incluso sin JavaScript; solo hace falta hacer más sofisticado el cálculo del ancho en CSS para que dependa del valor del slider.
• No está seguro de si ese es el lugar adecuado para reportar bugs, y en los dos primeros ejemplos hay un problema donde los controles interfieren con la interacción táctil y dificultan el desplazamiento.