Entrada nativa de intervalo duplo

• @stanko/dual-range-input é uma biblioteca de entrada nativa de intervalo duplo que usa dois inputs nativos de intervalo em HTML.
  • Usa inputs nativos para preservar todas as interações padrão e os recursos de acessibilidade.
  • É composta por cerca de 50 linhas de JavaScript e CSS.
• Por que isso é necessário
  • Ela usa uma interface para ajustar parâmetros em uma ferramenta de desenho generativo, e precisava de sliders mínimo e máximo.
  • As soluções existentes dependem de JavaScript e reimplementam recursos de arrastar e acessibilidade.
  • Ao usar inputs nativos de intervalo em HTML, clicar na trilha deve mover o slider mais próximo para aquele valor.
• Como funciona
  • Dois inputs são colocados lado a lado e, quando eles mudam, o ponto médio entre os dois valores é calculado.
  • As propriedades mínima e máxima são definidas com base no ponto médio, e a largura dos inputs é atualizada.
• Redimensionamento dos inputs
  • Ao calcular a largura dos inputs, é preciso considerar que a trilha é mais curta que a largura real do input.
  • O cálculo é simplificado adicionando a largura do polegar à largura do input.
  • Padding é adicionado ao wrapper do input para acomodar essa largura extra do polegar.
• Mover o polegar ao clicar
  • Os inputs são redimensionados para se encontrarem no ponto médio, e ao clicar o polegar mais próximo se move para aquele valor.
  • Ao ativar o modo de depuração, fica fácil ver o ponto médio.
• Estilização
  • É possível estilizar os inputs de intervalo usando CSS.
  • A estilização da trilha e do polegar é simples, e o raio de borda é removido na parte central de conexão da trilha.
• Tema
  • Várias variáveis são expostas para facilitar a troca de tema.
  • Valores padrão são fornecidos, e é possível criar temas sobrescrevendo as variáveis.
• Gradiente
  • Um gradiente CSS é usado para pintar o intervalo selecionado.
  • A variável --dri-gradient-position é usada para definir o gradiente e é atualizada no código junto com a largura.
• Conclusão
  • Este post serve para organizar as ideias e espera inspirar o uso de elementos nativos.

[GN⁺]

Comentários do Hacker News

• A parte central do slider deve sempre poder ser movida, e deve ser possível mover as duas alças ao mesmo tempo, como no exemplo do Unity
• O autor criou o slider para sua arte generativa e prefere arrastar o slider para ver as mudanças na imagem em vez de digitar números
• Há um bug em que, depois de definir o slider como 100-100, não é possível mudar para 99-99, e esse problema acontece facilmente nas extremidades do slider
• Acredita-se que seja necessária uma implementação de valor duplo no HTML <input type=range>, e no Firefox há um bug em que o valor muda um passo por vez ao clicar na alça
• No design system da empresa, um estagiário fez um POC semelhante, mas ocorreu um problema de salto nos valores de entrada, e outro estagiário sugeriu uma solução com intervalos de entrada sobrepostos
• O termo "nativo" é discutível, e há quem pense que, se precisa de JavaScript, então já não é mais nativo
• Alguém usou React para implementar uma funcionalidade específica, mas teve dificuldades por não ter muita familiaridade com desenvolvimento frontend
• Usaram o slider do jQuery UI, mas foi necessário adicionar jQuery e jQuery UI só para um único slider
• Pode funcionar até sem JavaScript; basta tornar mais sofisticado o cálculo da largura no CSS para depender dos valores do slider
• Há dúvida se este é o lugar apropriado para relatar bugs, e as alças dos dois primeiros exemplos bloqueiam a interação por toque, atrapalhando a rolagem