Table des matières:
Vidéo: Créer un SLIDER pour votre site en CSS 2025
Les curseurs permettent à l'utilisateur de saisir une valeur visuellement - dans le cadre d'un ensemble. Dans CSS3, un curseur garantit que l'utilisateur entre une valeur correcte dans une plage de valeurs, de sorte que vous n'avez pas à vous soucier des problèmes de sécurité ou des valeurs incorrectes. En conséquence, les curseurs fournissent un moyen précieux de permettre une entrée variable.
L'exemple suivant montre comment utiliser un curseur dans votre application. Il commence par le code HTML utilisé pour définir l'emplacement et l'apparence de base du curseur. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapter 06Widgets du code téléchargeable sous le nom Slider.HTML.)
Utilisation du widget Slider
0 50 Valeur:
Le curseur a une valeur minimale de 0 et une valeur maximale de 50. Le curseur utilise également le CSS suivant pour donner un résultat apparence plus agréable et pour permettre de marquer le début et la fin de l'échelle.
#Slider {largeur: 50%; margin: 30px;} #Left {position: absolue; haut: 15px; left: -5px;} #Right {position: absolue; haut: 15px; left: 99%;}
Comme vous pouvez le voir, le CSS place le début et la fin de l'échelle dans une position particulière afin qu'elle corresponde à la taille du curseur. Pour autant que l'utilisateur le sache, l'échelle et le curseur sont d'une seule pièce, mais ils sont en fait deux morceaux dans le code. La partie restante du code est le script montré ici.
$ (function () {$ ("# Slider"). Slider ({// Définit la valeur maximale du curseur max: 50, // Effectue des tâches quand la valeur change. (event, ui) {// Afficher la valeur actuelle du curseur. $ ("# Value"). text ($ ("# Slider"). slider ("value"));}});})
In Dans ce cas, le code définit la valeur maximale du curseur sur 50. La valeur minimale est définie par défaut sur 0. Toutefois, vous pouvez définir les valeurs maximale et minimale sur n'importe quelle position. Même si l'exemple ne le montre pas, le Slider peut avoir plus d'un handle, donc il peut représenter une plage. Cette flexibilité signifie que vous pouvez demander à l'utilisateur d'entrer à la fois un point de départ et un point d'arrêt.
L'un des événements les plus couramment utilisés est le changement. L'exemple affiche la nouvelle valeur chaque fois que l'utilisateur a fini de déplacer le handle. Cependant, la façon dont vous utilisez la sortie dépend de votre application. Généralement, vous utilisez la sortie pour fournir une entrée de données ou un contrôle d'application. Cependant, c'est une bonne idée d'afficher la valeur réelle du curseur afin que l'utilisateur connaisse la valeur d'entrée réelle.
