Entrée native à double plage

• @stanko/dual-range-input est une bibliothèque d’entrée native à double plage qui utilise deux entrées range HTML natives.
  • Elle conserve toutes les interactions par défaut et les fonctionnalités d’accessibilité grâce à l’utilisation d’entrées natives.
  • Elle se compose d’environ 50 lignes de JavaScript et de CSS.
• Pourquoi c’est nécessaire
  • Elle est utilisée comme interface pour ajuster des paramètres dans un outil de dessin génératif, avec besoin de curseurs minimum et maximum.
  • Les solutions existantes reposent sur JavaScript et réimplémentent les fonctions de glisser-déposer et d’accessibilité.
  • En utilisant des entrées range HTML natives, cliquer sur la piste doit déplacer le curseur le plus proche vers cette valeur.
• Principe de fonctionnement
  • Deux entrées sont placées côte à côte et, lorsqu’une entrée change, le point médian entre les deux valeurs est calculé.
  • Les propriétés minimum et maximum sont définies sur ce point médian, puis la largeur des entrées est mise à jour.
• Redimensionnement des entrées
  • Lors du calcul de la largeur des entrées, il faut tenir compte du fait que la piste est plus courte que la largeur réelle de l’entrée.
  • Le calcul est simplifié en ajoutant la largeur du pouce à la largeur de l’entrée.
  • Un padding est ajouté au conteneur des entrées pour absorber la largeur supplémentaire du pouce.
• Déplacement du pouce au clic
  • Les entrées sont redimensionnées pour se rejoindre au point médian, et au clic, le pouce le plus proche se déplace vers cette valeur.
  • Il est possible d’activer un mode debug pour visualiser facilement le point médian.
• Style
  • Les entrées range peuvent être stylisées avec du CSS.
  • Le style de la piste et du pouce est simple, et le rayon de bordure est supprimé sur la partie centrale de raccord de la piste.
• Thème
  • Plusieurs variables sont exposées pour permettre de modifier facilement le thème.
  • Des valeurs par défaut sont fournies, et il est possible de créer un thème en redéfinissant les variables.
• Dégradé
  • Un dégradé CSS est utilisé pour peindre la plage sélectionnée.
  • La variable --dri-gradient-position est utilisée pour définir le dégradé et est mise à jour dans le code en même temps que la largeur.
• Conclusion
  • Ce billet vise à mettre les idées à plat et espère inspirer l’usage d’éléments natifs.

[GN⁺]

Commentaires Hacker News

• La partie centrale du slider devrait toujours pouvoir être déplacée, et il devrait être possible de bouger les deux poignées en même temps, comme dans l’exemple de Unity
• L’auteur a créé ce slider pour ses propres illustrations génératives et préfère faire glisser le slider pour voir les variations de l’image plutôt que de saisir des nombres
• Il existe un bug qui empêche de passer de 100-100 à 99-99, et ce problème survient facilement aux extrémités du slider
• Il estime qu’une implémentation à double valeur est nécessaire pour HTML <input type=range>, et qu’il existe dans Firefox un bug où cliquer sur une poignée fait changer la valeur d’un cran
• Dans le design system de son entreprise, un stagiaire avait créé un POC similaire, mais le problème de valeurs qui sautent est apparu ; un autre stagiaire a proposé une solution avec des plages d’entrée qui se chevauchent
• Le terme « natif » peut être discuté, et si JavaScript est nécessaire, alors ce n’est plus vraiment natif selon lui
• Il a utilisé React pour implémenter une fonctionnalité précise, mais comme il n’est pas à l’aise en développement frontend, il a eu du mal
• Il a utilisé le slider de jQuery UI, mais a dû ajouter jQuery et jQuery UI pour un seul slider
• Cela peut fonctionner sans JavaScript ; il suffit de rendre plus sophistiqué le calcul de largeur en CSS pour qu’il dépende des valeurs du slider
• On peut se demander si c’est le bon endroit pour signaler des bugs, et dans les deux premiers exemples, les poignées bloquent les interactions tactiles et gênent le défilement