Curseur Foundation
Le curseur Foundation permet aux utilisateurs de sélectionner une valeur dans une plage en faisant glisser :
Le curseur peut être créé en utilisant<div class="range-slider" data-slider>Créer. Dans<div>À l'intérieur, ajoutez deux<span>Élément :<span class="range-slider-handle">pour créer un curseur rectangulaire (fond bleu),<span class="range-slider-active-segment">C'est la barre horizontale grise derrière le curseur, qui est la zone de glissement du curseur.
Remarque :Le slider nécessite JavaScript. Vous devez donc initialiser Foundation JS :
Exemple
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Essayez-le vous-même »
coins arrondis et curseur désactivé
Utilisation.radiuset.roundclasse pour ajouter des curseurs à coins arrondis. Utilisez.disabledclasse pour désactiver le curseur :
Exemple
<div class="range-slider radius" data-slider>...</div>
<div class="range-slider round" data-slider>...</div>
<div class="range-slider disabled" data-slider>...</div>
Essayez-le vous-même »
curseur vertical
Utilisation.vertical-rangeclasse etdata-options="vertical: true;"pour créer un curseur vertical :
Exemple
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
valeur du curseur
Par défaut, le curseur est placé au milieu de la barre (valeur "50"). Cela peut être modifié en ajoutantdata-options="initial: num"attribut pour modifier la valeur par défaut :
Exemple
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
afficher la valeur du curseur
Si nous devons afficher la valeur en temps réel pendant le déplacement du curseur, nous pouvons le faire en l’ajoutant dans l’
<div>Ajouter àdata-options="display_selector:#id"attribut et la valeur id de l'élément correspond à l'id du curseur, comme dans l'exemple suivant :
Exemple
<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
options de données combinées
L'exemple suivant utilisedisplay_selectoretinitialoptions de données :
Exemple
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
Pas
Par défaut, la quantité d'augmentation ou de diminution lors du déplacement du curseur est "1". Cela peut être modifié en ajoutantdata-options="step: num;"attribut pour modifier la valeur du pas. Dans l'exemple, elle est définie sur 25 :
Exemple
<div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
plage personnalisée
Par défaut, la valeur de la plage va de "0" à "100". Cela peut être modifié en ajoutant data-optionsstartetendpour définir la valeur de l'intervalle. L'exemple suivant définit la valeur de l'intervalle de "1" à "20" :
Exemple
<div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Essayez-le vous-même »
utiliser la grille
Ce qui suit concerne l'utilisation du curseur dans une grille :
Exemple
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- L'élément d'affichage (Astuce : utilisez CSS pour le positionner parfaitement) -->
<span id="mySlider" style="display:block;margin-top:14px;"></span>
</div>
</div>
Essayez-le vous-même »
Utiliser un champ de saisie
L'exemple suivant utilise<input>remplacement<span>pour afficher la valeur du curseur :
Exemple
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- L'élément d'affichage (Astuce : utilisez CSS pour le positionner parfaitement) -->
<input type="number" id="mySlider" style="margin-top:7px;" value="72">
</div>
</div>
Essayez-le vous-même »