Quelle serait une solution adaptée aux mobiles pour un curseur de plage avec des contrôles d'entrée?
J'ai un curseur de plage avec deux contrôles d'entrée, chacun avec un bouton supérieur/inférieur. L'utilisateur doit pouvoir effectuer sa saisie en glissant (rapide mais pas précis), en tapant dans les entrées (vitesse moyenne, très précise) et en marchant avec les boutons haut/bas (très précis mais lent). Il devrait également y avoir une étiquette qui indique la plage actuelle.
Donc, ma conception pour cela ressemble à l'image ci-dessous:
Mon problème avec cela est que je dois prendre en compte une mise en page Web réactive (et conviviale). Je n'ai aucune idée de la meilleure façon de présenter les éléments à l'utilisateur sur un appareil mobile. Les contrôles d'entrée au-dessus du curseur ont chacun une largeur d'environ 150 pixels, donc les placer sur la même ligne n'aura pas l'air très bien. Il devrait également y avoir une étiquette pour dire à l'utilisateur ce qu'il va changer ici. Et peut-être qu'à l'avenir, il y aura quelque chose. comme une liste déroulante pour sélectionner une unité pour les valeurs.
J'ai pensé empiler les commandes les unes sur les autres mais le résultat ne sera pas très agréable. J'espère que vous avez de meilleures idées;)
Vous pouvez masquer les deux contrôles d'entrée et les afficher uniquement lorsque l'utilisateur tapote l'un des extrêmes:
L'utilisateur doit pouvoir faire glisser les extrêmes, qui peuvent également contenir les valeurs actuelles.
Vous pouvez découper la complexité en une limite inférieure et une limite supérieure, et éventuellement une différence entre les deux si cela est utile.
L'augmentation de la limite inférieure au-dessus de la limite supérieure dérive automatiquement la limite supérieure le long, tandis que la diminution de la limite supérieure en dessous de la limite inférieure dérive automatiquement la limite inférieure vers le bas.
Si l'utilisateur a entré manuellement une "différence", le shuntage des valeurs pourrait maintenir cette différence dans la mesure du possible.
Si vous avez ajusté la dernière limite inférieure, la saisie d'une différence ajuste la limite supérieure en priorité.
Si vous avez ajusté la limite supérieure pour la dernière fois, la saisie d'une différence ajuste la limite inférieure en priorité.
Alternativement une disposition plus symétrique ... mais pas si bonne quand la main/les doigts sont dans le chemin de la valeur!
