Comment utiliser un composant d'interface utilisateur jQuery Slider dans votre application Web

Découvrez comment intégrer facilement un composant curseur à votre application Web. Ce composant est idéal pour le réglage du volume et de la luminosité, ou partout où vous souhaitez apporter des modifications immédiates.

Dans le dernier épisode vous avez découvert le composant ProgressBar . Une barre de progression indique la durée d'un processus ou un temps d'attente indéterminé. Dans cet épisode, vous découvrirez le composant Slider . Un curseur permet aux utilisateurs de choisir parmi une plage de valeurs en déplaçant un pouce le long d'une piste. La piste est une barre qui représente toutes les valeurs possibles pouvant être choisies et le pouce est une poignée déplaçable. Un curseur est idéal pour ajuster les valeurs qui seront mises à jour immédiatement. Vous pouvez utiliser un curseur pour changer le volume, rechercher une position dans un lecteur multimédia ou ajuster les paramètres de luminosité. Ensuite, vous verrez comment créer un curseur avec Kendo UI et effectuer un contrôle du volume.

Curseur Kendo UI de base

Lorsque vous initialisez le Curseur vous aurez un suivre pour que vous sélectionniez les valeurs de 0 à 10. Les sélections possibles sont marquées par des graduations. Toutefois, vous pouvez supprimer les graduations en définissant l'option tickPlacement sur none . Chaque marque de graduation représente une valeur de 1. Vous pouvez personnaliser le changement de valeur de chaque marque de graduation avec l'option smallStep . Des boutons situés de chaque côté du curseur permettent d’augmenter ou de réduire la valeur du curseur. Ceux-ci peuvent être supprimés en rendant le paramètre showButtons false . Voici un exemple de curseur utilisant les thèmes par défaut Matériau et Bootstrap:

< html > < head > < meta charset = " utf-8 " > < titre > Curseur </ titre > < link link rel = " feuille de style " href = " https://kendo.cdn.telerik.com/2018.3.911/styles/kendo .common-material.min.css " > < link rel = " feuille de style " href = " https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css " > < script src = " https://code.jquery.com/jquery-1.12.3.min.js " > </ script > < script src = " https://kendo.cdn.telerik.com/2018.2.620/js /kendo.all.min.js " > </ script > < style >        body { famille de polices : helvetica ; }      </ style > </ head > < corps > < div [19659013] id = " curseur " > </ div > < script >        $ ( document ) . ready ( fonction () { $ ] ( '# slider' ) . kendoSlider () ; } ) ;      </ script > </ body > </ html >

Il existe plusieurs façons de sélectionner une valeur sur le curseur. En plus d'utiliser les boutons, vous pouvez cliquer sur la poignée de déplacement et la faire glisser vers une nouvelle position ou sauter à une nouvelle position en cliquant sur la piste. Vous pouvez également parcourir le curseur en cliquant sur la poignée de déplacement et en utilisant les flèches du clavier pour avancer et revenir en arrière. Vous pouvez sauter plusieurs fois dans le curseur en cliquant sur la poignée de déplacement, puis en appuyant sur les touches page précédente ou page suivante. Par défaut, le curseur vous permet d'effectuer de grands sauts cinq pas à la fois. Cela peut également être modifié à l'aide de l'option largeStep .

Créer un curseur de volume

Notre curseur de volume aura les valeurs 0-15 et inclura un bouton unique sur le côté gauche pour basculer le muting. le volume. Lorsque le curseur a une valeur de zéro, l'icône change pour indiquer que le volume est désactivé. Si vous cliquez sur le bouton Muet lorsque le volume est activé, la valeur du curseur devient zéro. Si le curseur est déjà à zéro, cliquez sur le bouton muet pour le ramener à sa dernière valeur connue. Tout d’abord, vous verrez comment mettre à jour l’apparence du bouton Muet en fonction de la valeur du curseur. Voici le code HTML et CSS nécessaire pour créer le curseur:

  
  



 #volume {
  alignement vertical: super;
  marge droite: 1em;
  curseur: pointeur;
}

Pour détecter le moment où la valeur du curseur est égale à zéro, nous devons implémenter un gestionnaire pour l’événement de changement du curseur . Voici le code d'initialisation du curseur:

 var  slider  =   $  ( '# slider' ) .  kendoSlider [1965900)] ( {
  min :   0 
  max :   15 
  valeur :   5 
  showButtons :   false 
  tickPlacement :   'néant' 
  change :  onChange
} ) .  données  ( 'kendoSlider' ) ; 

Notre fonction onChange devra connaître la valeur du curseur afin de désactiver et d'activer le contrôle du volume. Il est également responsable de la mise à jour de la dernière valeur connue enregistrée. Nous allons utiliser la méthode du curseur du curseur pour enregistrer cette valeur. Voici le code supplémentaire requis pour implémenter le gestionnaire d'événements change:

 var  lastValue  =  curseur .  value  () ; 19659138] function   onChange  ()  {
  lastValue  =  curseur .  valeur  () ; 
   si   ( lastValue  ===   0 )   {
     muet  () ; 
  }   sinon   {
     unmute  (. 19659009]; 
  } 
} 

Les fonctions mute et unmute utilisées ici modifieront l'icône de notre bouton. En pratique, vous pouvez inclure le comportement nécessaire pour ajuster réellement le volume. Voici les implémentations pour les deux fonctions:

 function   muet  ()  {
   $  ( '# volume' )   removeClass  ( "ki-volume maximum" ) ; 
   $  ( "# volume" ) .  addClass  ( 'ki-volume-off' ) ; 
} 

 function   de sourdine  () ()  . 
   $  ( "# volume" ) .  addClass  ( "ki-volume maximum" ) ; 19659171] $  ( "# volume" ) .  removeClass  ( "ki-volume off" ) ; 
. ]} 

Désormais, lorsque vous faites glisser la poignée complètement à gauche, le bouton devient une icône de volume désactivé. La dernière partie consiste à ajouter un gestionnaire d'événements pour mettre à jour le curseur lorsque l'utilisateur clique sur le bouton Muet. Si la valeur du curseur n’est pas nulle, il sera forcé à zéro et le volume sera coupé. Si le volume est déjà coupé, cliquez sur le bouton pour déplacer le curseur sur la dernière valeur connue. Toutefois, si la dernière valeur du curseur était zéro, la désactivation du son le rendrait égal à un. Voici le gestionnaire de clics utilisé pour notre contrôle de volume:

  ( '# volume' ) .  cliquez  ( fonction  ([19659009])  {
   if   ( curseur .  valeur  ()  ! ==   0 )  ! 19659148] {
     muet  () ; 
    curseur .  valeur  ( 0 ) ; 
  }   sinon   {
     unmute  ([19659009). 19659009]; 
    value  =  lastValue >   0  ?  lastValue :   1 
    curseur .  valeur  ( valeur ) ; 
  } 
 ) ; 

Commencer mon essai de Kendo UI

Versions Angular, React et Vue

Vous recherchez un composant d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular Kendo UI pour React ou Kendo UI pour Vue .

Ressources