Bootstrap - Range : Guide Complet pour Débutants

Salut à toi, futur développeur web ! Aujourd'hui, on va plonger dans un sujet passionnant qui va certainement glisser dans ton cœur - l'input Bootstrap Range. En tant que ton prof de informatique du coin, je suis là pour te guider dans cette aventure, étape par étape. Alors, prends ta boisson favorite, installe-toi confortablement, et c'est parti !

Qu'est-ce que Bootstrap Range ?

Avant de se lancer dans le code, comprenons ce avec quoi nous avons affaire. Bootstrap Range est une version personnalisée de l'élément HTML5 <input type="range">. Il permet aux utilisateurs de sélectionner une valeur dans une plage spécifiée en glissant un contrôle le long d'une barre. C'est comme une version numérique de ces curseurs que tu vois sur les tables de mixage audio - pretty cool, non ?

Exemple de Base

Commençons par un exemple simple pour nous mettre en jambe :

<label for="customRange1" class="form-label">Exemple de plage</label>
<input type="range" class="form-range" id="customRange1">

Ce code crée un curseur de plage de base. L'élément <label> fournit une description pour notre input de plage, tandis que l'élément <input> avec type="range" crée le curseur en lui-même. La classe class="form-range" applique le style personnalisé de Bootstrap pour lui donner un aspect élégant et moderne.

Lorsque tu exécutes ce code, tu verras un curseur horizontal que les utilisateurs peuvent faire glisser vers la gauche ou vers la droite pour sélectionner une valeur. Par défaut, la plage va de 0 à 100.

Plage Désactivée

Parfois, tu peux vouloir afficher un curseur de plage mais empêcher les utilisateurs d'interagir avec lui. C'est là que l'attribut disabled entre en jeu :

<label for="disabledRange" class="form-label">Plage désactivée</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Cet exemple est similaire à notre exemple de base, mais nous avons ajouté l'attribut disabled à l'élément <input>. Cela grise le curseur et empêche toute interaction - parfait lorsque tu veux montrer une valeur mais ne pas permettre de modifications.

Valeurs Min et Max

Que se passe-t-il si nous voulons que notre curseur représente une plage spécifique de valeurs ? C'est là que les attributs min et max entrent en jeu :

<label for="customRange2" class="form-label">Exemple de plage</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Dans cet exemple, nous avons défini min="0" et max="5". Au lieu de la plage par défaut de 0 à 100, notre curseur ira de 0 à 5. C'est génial lorsque tu as besoin d'un contrôle plus précis sur la plage des valeurs.

Étapes

Parfois, tu peux vouloir que ton curseur se déplace en incréments spécifiques. C'est là que l'attribut step entre en jeu :

<label for="customRange3" class="form-label">Exemple de plage</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Ici, nous avons ajouté step="0.5" à notre exemple précédent. Cela signifie que le curseur se déplacera en incréments de 0.5. Les valeurs possibles seront donc 0, 0.5, 1, 1.5, et ainsi de suite, jusqu'à 5.

Mettre Tout Ensemble : Un Exemple Pratique

Maintenant que nous avons couvert les bases, créons un exemple plus complexe qui combine tout ce que nous avons appris :

<div class="container mt-5">
<h2> Sélecteur de Taille de Pizza </h2>
<label for="pizzaSize" class="form-label">Sélectionnez la taille de votre pizza (en pouces)</label>
<input type="range" class="form-range" min="8" max="18" step="2" id="pizzaSize">
<p>Taille sélectionnée : <span id="sizeDisplay">13</span> pouces</p>
</div>

<script>
const pizzaSize = document.getElementById('pizzaSize');
const sizeDisplay = document.getElementById('sizeDisplay');

pizzaSize.addEventListener('input', function() {
sizeDisplay.textContent = this.value;
});
</script>

Dans cet exemple, nous avons créé un sélecteur de taille de pizza. Décomposons-le :

1. Nous utilisons un input de plage avec min="8", max="18", et step="2". Cela permet aux utilisateurs de sélectionner des tailles de pizza paires de 8 à 18 pouces.
2. Nous avons ajouté un élément <p> pour afficher la taille sélectionnée.
3. Nous avons inclus un peu de JavaScript pour mettre à jour la taille affichée en temps réel lorsque l'utilisateur déplace le curseur.

Lorsque tu exécutes ce code, tu verras un curseur qui permet aux utilisateurs de choisir leur taille de pizza, avec la taille sélectionnée qui se met à jour instantanément sous le curseur. C'est comme être dans une pizzeria numérique !

Conclusion

Et voilà, les amis ! Nous avons glissé à travers les bases des inputs Bootstrap Range. De simples curseurs à des exemples interactifs complexes, tu as maintenant les outils pour ajouter un peu de magie glissante à tes projets web.

souviens-toi, la pratique rend parfait. Essaie de créer tes propres inputs de plage, expérimente avec différents valeurs min, max, et step, et vois ce que tu peux inventer. Peut-être un contrôleur de volume pour un lecteur musical ? Ou un réglage de difficulté pour un jeu ? Les possibilités sont infinies !

Bonne programmation, et puisses tes plages toujours glisser en douceur !

Credits: Image by storyset