Voyons dans cet article comment obtenir un champ de type Range.
Range retourne une valeur numérique nous verrons également comment en afficher le résultat.
Niveau : Moyen
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅
Prérequis : html, css, utilisation de l'inspecteur du navigateur
Nous trouvons habituellement ces réglettes dans les lecteurs vidéo, audio, et parfois aussi… dans les formulaires. Dans certains cas, ils peuvent donner une belle allure à nos formulaires. Voyons comment nous pourrions profiter de ce type de champs, à l'heure actuelle, indisponibles dans la sélection de champs de BreezingForms.
Les éléments <input> dont l'attribut type vaut range permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux "bornes". La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représentés avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de "widget" n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.
(Source : developer.mozilla.org)
Malgré sa réputation d'imprécision, il est toujours possible de rendre ce type de champs tout aussi précis qu'un autre dès lors que l'on affiche la valeur qu'il retourne. Nous allons donc, en suivant cet article et grâce à un peu de JavaScript et éventuellement de CSS, préparer un champ de type range, ajouté d'un champ de type text qui affichera la valeur retournée par le Range.
Préparation des éléments de formulaires
Préparons donc un formulaire de test afin de bien assimiler la mise en place d'un tel type de champ.
Ajoutons sur la page 1 de ce formulaire une section de type d'écran → Éléments sur la même ligne
Ajoutons-y un champ de type Number input. Nommons le slider et donnons-lui le titre que l'on souhaite et la valeur 0.
Le type number input est un champ de type numérique, tout comme celui de type range. Son paramétrage est dès lors identique. Une valeur de départ, une valeur minimale, une valeur maximale et un pas (incrémentation de la valeur au déplacement du curseur).
Dans les propriétés avancées de ce champ, saisissons les informations suivantes :
- Pas (step) = 1
- Valeur minimale = 0
- Valeur maximale = 25
Cela nous présentera un champ allant de 0 à 25 par incrémentation de 1.
Ajoutons ensuite un champ de type Texte, nommé count et intitulé comme vous le voudrez, on n'en affichera pas le label…
Dans les propriétés avancées de ce champ, validons l'option Lecture seule.
Nous avons maintenant les éléments pour afficher notre slider numérique et sa valeur. Si nous faisons un aperçu de notre formulaire en cet instant, il ne ressemble pas à ce que l'on recherche. Il affiche un champ de type numérique classique avec des boutons pour augmenter ou diminuer sa valeur et un champ de texte vide.
Mise en forme
Commençons par transformer notre champ de type Number input en type Range.
Rendons-nous dans les options avancées du formulaire et cliquons le bouton Plus d'options. Activons l'onglet Scripts, sélectionnons l'option Personnalisé et créons la structure du code à l'aide du bouton prévu à cet effet.
Le code affiché dans la zone de texte doit ressembler à ceci :
function nomFormulaire_init()
{
} // ff_nomFormulaire_initjuste après l'accolade ouvrante, tapons un retour chariot et insérons le code suivant :
setInterval(counter, 50); // permettra l'affichage de la valeur de range en temps réels
ff_getElementByName('slider').type = 'range'; // changement de type number vers range
Si nous faisons un aperçu de notre petit formulaire à cet instant, il a une tout autre gueule. Le champ de type number apparaît désormais comme un curseur sur une règle et on peut glisser ce curseur de gauche à droite. Son design est prédéterminé par le navigateur en cours d'utilisation.
Même si on ne le voit pas à cet instant, ce champ retourne bien une valeur selon que l'on manipule son curseur de gauche à droite. Tâchons dans ce cas d'afficher cette valeur afin de rendre notre champ bien précis et mettre au rebut sa réputation d'imprécision. 😊
Pour cela nous demanderons au champ de texte nommé count, d'afficher ce que retourne <input type="range"…>.
Retournons dans les options avancées du formulaire pour y ajouter un bout de script qui permettra cet affichage en temps réel.
En toute fin de script déjà présent et donc après la dernière accolade insérée par l'ajout précédent, ajoutons ce petit bout de code :
function counter() { // appelle la fonction counter
ff_getElementByName('count').value = ff_getElementByName('slider').value; // permet l'affichage de la valeur de slider dans le champ count
}Le JavaScript final doit ressembler à ceci :
function ff_nomFormulaire_init()
{
setInterval(counter, 50);
ff_getElementByName('slider').type = 'range'; // à répéter pour chaque champ
} // ff_nomFormulaire_init
function counter() {
ff_getElementByName('count').value = ff_getElementByName('slider').value; // à répéter pour chaque champ
}Si nous testons notre petit formulaire maintenant, nous nous apercevons que le slider est bien en place et à sa droite, le champ destiné à afficher la valeur. Ce champ affiche désormais le chiffre 0. Si on déplace le curseur, il se met à jour sous 50 millisecondes (valeur donnée à la fonction counter) et donc quasiment instantanément pour afficher la valeur retournée par le slider.
Personnalisation visuelle
Si le rendu vous plait, vous avez terminé la personnalisation de votre slider de formulaire, sinon, il faudra ajouter un peu de CSS.
Pour cela, je vous dirige vers ce générateur d'input range. Il suffit d'y choisir un thème de départ dans la zone presets et, à l'aide des curseurs dans les zones Thumb Properties et Track Properties, de pousser sa personnalisation. Le modèle se met à jour au fur et à mesure de vos changements. Lorsque vous êtes satisfait, il reste à copier, coller le CSS généré en fin de votre feuille de style du template du formulaire.
Il sera peut-être nécessaire d'apporter encore quelques règles CSS pour ajuster la hauteur des éléments, margin, etc. afin de les harmoniser.
