Ajouter facilement un double-curseur à vos formulaires HTML
Lors de la conception de formulaires HTML on se retrouve assez vite limité par les éléments proposés de base. C'est par exemple le cas si on utilise les curseurs avec le code <input type="range">, ceux-ci ne permettent l'utilisation que d'un seul curseur par élément. Or il pourrait être parfois utile d'avoir un champ proposant deux curseurs pour sélectionner une valeur minimale et une valeur maximale, par exemple pour le choix d'un intervalle de prix dans un formulaire de recherche.
Champ à double curseurs
C'est un problème auquel je me suis confronté et pour lequel j'ai donc développé une solution permettant facilement d'obtenir un champ à double curseurs (double range) comme celui-ci :
L'implémentation est assez simple, il suffit d'inclure dans son projet les fichiers javascript et css correspondant (disponibles dans le repository Github) et d'utiliser le code HTML suivant :
<!DOCTYPE html>
<html>
<head>
<title>Double Range Example</title>
<link rel="stylesheet" type="text/css" href="doubleRange.css"/>
</head>
<body>
<form>
<div id="doubleRange" class="doubleRange">
<div class="barre">
<div class="barreMilieu" style="width:50%; left:25%;"></div>
<div class="t1 thumb" style="left:25%"></div>
<div class="t2 thumb" style="left:75%;"></div>
</div>
<div class="label">de <span class="labelMin"></span> à <span class="labelMax"></span></div>
<input type="hidden" name="pmin" value="" class="inputMin"/>
<input type="hidden" name="pmax" value="" class="inputMax"/>
</div>
</form>
<script type="text/javascript" src="doubleRange.js"></script>
<script type="text/javascript">
setDoubleRange({
element: '#doubleRange',
minValue: 0,
maxValue: 50000,
maxInfinite: true,
stepValue: 1000,
defaultMinValue: 500,
defaultMaxValue: 10000,
unite: '€'
});
</script>
</body>
</html>
L'élément div #doubleRange contient donc le double-curseur, des labels permettent l'affichage en temps réel des valeurs sélectionnées. Les valeurs sont restituées au formulaire via les champs pmin et pmax dans cet exemple.
Configuration
Le code javascript permet la mise en place du double-curseur. Sa configuration est possible à l'aide des éléments suivants :
- element : Il s'agit de l'ID (#element) ou de la classe (.element) de l'élément HTML contenant le double-curseur (dans l'exemple #doubleRange). Si vous souhaitez utiliser plusieurs double-ranges, il vous suffit de dupliquer le code en utilisant des ID ou classes uniques.
- minValue : Il s'agit de la valeur minimale que vous souhaitez qu'il soit possible de choisir.
- maxValue : Il s'agit à l'inverse de la valeur maximale qu'il sera possible de choisir.
- maxInfinite: Valeurs possibles true ou false. Si vous indiquez true, alors la position maximale du curseur sera remplacée par l'infinie, la valeur du champ pmax sera donc vide. Indiquez false pour ne pas utiliser la fonction.
- stepValue : Il s'agit du pas de progression du curseur. Si vous indiquez une valeur de 5, alors le curseur avancera de 5 en 5.
- defaultMinValue : Vous pouvez choisir ici la valeur du premier curseur qui sera sélectionnée par défaut au chargement de la page.
- defaultMaxValue : Ici vous choisissez la valeur qui sera sélectionnée par défaut pour le second curseur.
- unite : Il s'agit de l'unité qui sera affichée dans les labels pour la restitution en temps réel des valeurs.
Vous avez maintenant tous les éléments permettant d'utiliser le double curseur. L'outil est disponible en open source sur Github et est susceptible d'être amélioré par la suite si besoin.
Voir le dépôt Github du double range
Catégories : Javascript, HTML
Par Guillaume le 13/11/2020 à 15:44