Prise en charge de Multirange Polyfill pour les curseurs HTML5 à double poignée

le nouvelles entrées de la gamme HTML5 sont fantastiques pour les quantités et les sélections dynamiques comme les dates. Mais le curseur de la plage par défaut ne supporte pas plusieurs poignées.

Entrer Multirange, une polyfill créé pour supporter plusieurs poignées qui fonctionnent correctement et prennent en charge tous les principaux navigateurs.

C'est un outil gratuit et il fournit le meilleur moyen de ajouter plusieurs poignées de manière native, sans utiliser de plugin. Ce polyfill a deux ressources: une Fichier JS et un Fichier CSS. Ils les deux fonctionnent sur les entrées de gamme et tu peux télécharger les deux depuis le dépôt principal GitHub.

Notez que cela signifie que vous devez travailler avec des navigateurs qui supporte déjà l'entrée de gamme par défaut. Ça aussi nécessite des variables CSS qui ne sont pas supportés par tous les navigateurs.

Heureusement, Multirange utilise une solution de secours CSS où deux curseurs de plage sont utilisés au lieu d'un. Ce n'est pas une solution parfaite mais il offre toujours une interface utilisable. Du côté positif, cela fonctionne dès la sortie de la boîte sans aucune condition.

Juste ajouter les fichiers sur votre site et vous pourrez Utilisez le plusieurs attribut sur vos champs de curseur. Vous pouvez également définir des plages pour les valeurs d'entrée avec une virgule.

Voici un bref extrait de HTML en utilisant le curseur Multirange:

Les poignées peuvent être traînés les uns contre les autres et même laissés l'un sur l'autre. Et la plage d'entrée encore supporte la navigation au clavier ce qui est excellent pour l'accessibilité.

Tous les démos et exemples de code source peut être trouvé sur la page Web Multirange, alors jetez-y un œil si vous cherchez un jour Curseur HTML multi-plages.