Slider
Le composant slider de mdui est implémenté avec le champ de saisie HTML5 <input type="range" />.
Utilisation
Le composant slider s’initialise automatiquement après le chargement de la page. Pour les sliders générés dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
Couleurs
Utiliser la couleur d’accentuation.
Lecture associée
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100"/>
</label><label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100"/>
</label>État désactivé
Ajoutez l’attribut disabled à l’élément input du slider continu ou discret pour le désactiver.
Slider continu :
<!-- Valeur par défaut de 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Valeur par défaut différente de 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Slider discret :
<!-- Valeur par défaut de 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Valeur par défaut différente de 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Slider généré dynamiquement
Si votre composant slider est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
Si vous modifiez dynamiquement la valeur d’un slider, vous devez appeler la méthode mdui.updateSliders() pour réinitialiser le composant. Cette méthode accepte un paramètre qui peut être un sélecteur CSS contenant la classe .mdui-slider, un élément DOM ou un tableau d’éléments DOM, afin de spécifier les sliders à réinitialiser. Si aucun argument n’est fourni, tous les sliders de la page sont réinitialisés.