Bootstrap - Slider Demo: A Guide for Beginners
Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des curseurs Bootstrap. En tant que votre professeur d'informatique de quartier, je suis là pour vous guider à travers cette aventure étape par étape. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et plongeons dedans !
Qu'est-ce qu'un curseur Bootstrap ?
Avant de commencer à coder, comprenons ce avec quoi nous avons affaire. Un curseur Bootstrap est un composant d'interface utilisateur qui permet aux utilisateurs de sélectionner une valeur dans une plage en glissant une poignée le long d'une barre. C'est comme une version numérique de ces curseurs de volume que vous voyez sur les vieilles radios - plutôt sympa, non ?
Pourquoi utiliser des curseurs Bootstrap ?
Les curseurs sont fantastiques pour :
- Sélectionner des valeurs numériques dans une plage
- Ajuster des paramètres comme le volume ou la luminosité
- Filtre les données en fonction d'une plage (pensez aux plages de prix sur les sites de shopping)
Maintenant que nous savons ce qu'ils sont et pourquoi ils sont utiles, mettons les mains dans le cambouis avec un peu de code !
Configurer votre environnement Bootstrap
Premierement, nous devons configurer notre environnement Bootstrap. Ne vous inquiétez pas; c'est plus simple que configurer un nouveau smartphone !
Étape 1 : Inclure Bootstrap CSS et JS
Ajoutez les lignes suivantes dans la section <head> de votre fichier HTML :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Ces lignes sont comme inviter Bootstrap à votre fête de codage. Elles apportent tous les styles et fonctions sympas dont nous aurons besoin.
Créer votre premier curseur Bootstrap
Maintenant, créons un curseur de base. C'est aussi simple que de faire du pain - eh bien, peut-être un peu plus compliqué, mais vous prendrez vite l'habitude !
Étape 2 : Structure HTML
Ajoutez ce code dans le corps de votre fichier HTML :
<div class="container mt-5">
<h2>Mon Premier Curseur Bootstrap</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>Valeur : <span id="rangeValue"></span></p>
</div>Décomposons cela :
-
<div class="container mt-5">: Cela crée un conteneur avec un peu de marge en haut. -
<input type="range">: C'est notre curseur d'entrée. -
class="form-range": Cette classe Bootstrap style notre entrée comme un curseur. -
min="0" max="100" step="1": Ces attributs définissent la valeur minimale, maximale et l'étape. -
<p>Valeur : <span id="rangeValue"></span></p>: Cela affichera notre valeur sélectionnée.
Étape 3 : Magie JavaScript
Maintenant, ajoutons un peu de JavaScript pour rendre notre curseur interactif :
<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // Affiche la valeur par défaut du curseur
// Mettre à jour la valeur actuelle du curseur (chaque fois que vous déplacez la poignée du curseur)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>Ce script fait deux choses :
- Il affiche la valeur initiale du curseur.
- Il met à jour l'affichage de la valeur chaque fois que vous déplacez le curseur.
Personnaliser votre curseur
Maintenant que nous avons un curseur de base, améliorons-le un peu. Il est temps de mettre nos chapeaux de designer !
Étape 4 : Ajouter un peu de style
Ajoutons un peu de CSS personnalisé pour faire ressortir notre curseur :
<style>
.custom-range {
width: 300px;
}
.custom-range::-webkit-slider-thumb {
background: #007bff;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
</style>Ajoutez ceci dans la section <head> de votre fichier HTML. Cela change la largeur du curseur et colore la poignée (la partie que vous faites glisser) en bleu.
Étape 5 : Créer un curseur double
Maintenant, créons quelque chose de plus avancé - un curseur double pour sélectionner une plage :
<div class="container mt-5">
<h2>Sélecteur de Plage de Prix</h2>
<div class="row">
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="minPrice">
<p>Prix Minimum : $<span id="minValue"></span></p>
</div>
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="maxPrice">
<p>Prix Maximum : $<span id="maxValue"></span></p>
</div>
</div>
</div>Et le JavaScript correspondant :
<script>
const minSlider = document.getElementById('minPrice');
const maxSlider = document.getElementById('maxPrice');
const minOutput = document.getElementById('minValue');
const maxOutput = document.getElementById('maxValue');
minOutput.innerHTML = minSlider.value;
maxOutput.innerHTML = maxSlider.value;
minSlider.oninput = function() {
minOutput.innerHTML = this.value;
if (parseInt(this.value) > parseInt(maxSlider.value)) {
maxSlider.value = this.value;
maxOutput.innerHTML = this.value;
}
}
maxSlider.oninput = function() {
maxOutput.innerHTML = this.value;
if (parseInt(this.value) < parseInt(minSlider.value)) {
minSlider.value = this.value;
minOutput.innerHTML = this.value;
}
}
</script>Cela crée deux curseurs qui travaillent ensemble pour sélectionner une plage de prix. Le script assure que le prix minimum ne dépasse jamais le prix maximum et inversement.
Conclusion
Félicitations ! Vous venez de créer vos premiers curseurs Bootstrap. De simple curseur à un sélecteur de plage de prix plus complexe, vous avez couvert beaucoup de terrain. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différents styles et fonctionnalités.
Voici un résumé rapide de ce que nous avons appris :
| Concept | Description |
|---|---|
| Configuration Bootstrap | Inclure Bootstrap CSS et JS dans votre HTML |
| Curseur de Base | Créer un simple curseur de plage stylé avec Bootstrap |
| Interaction JavaScript | Utiliser JavaScript pour afficher et mettre à jour les valeurs du curseur |
| Style Personnalisé | Appliquer du CSS personnalisé pour modifier l'apparence du curseur |
| Curseur Double | Créer un sélecteur de plage avec deux curseurs interconnectés |
Continuez à glisser votre chemin vers le succès, et bon codage !
Credits: Image by storyset