Maison > Article > interface Web > utilisation du rangeslider jquery

utilisation du rangeslider jquery

王林original: 2023-05-28 15:49:08463parcourir

jQuery Rangeslider est un plugin basé sur jQuery qui vous permet de créer facilement un contrôle de curseur déplaçable. Dans cet article, nous allons vous montrer comment utiliser jQuery Rangeslider.

Installer jQuery Rangeslider

jQuery Rangeslider peut être installé de plusieurs manières, telles que :

Introduit via un lien CDN

Vous pouvez obtenir jQuery Rangeslider en ajoutant un lien CDN. C'est le moyen le plus simple de l'installer :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

Installer via NPM

Vous pouvez également installer jQuery Rangeslider via NPM. Exécutez la commande suivante dans le terminal :

npm install rangeslider.js

Ensuite, ajoutez le code suivant à votre fichier HTML :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

Utilisation de jQuery Rangeslider

Une fois l'installation terminée, nous pouvons commencer à utiliser jQuery Rangeslider. Voici un exemple d'utilisation :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider({
        polyfill: false,
        onSlide: function(position, value) {
          console.log('position: ' + position, ' value: ' + value);
        }
      });
    });
  </script>
</body>
</html>

Cet exemple montre comment utiliser jQuery Rangeslider pour ajouter un contrôle de curseur d'entrée déplaçable à une page Web.

Dans le code, nous introduisons d'abord les fichiers CSS et JavaScript nécessaires.

Ensuite, dans un élément de zone de saisie HTML, nous ajoutons l'attribut type="range", qui créera un contrôle slider dans la page Web.

Ensuite, nous utilisons le sélecteur jQuery pour sélectionner la zone de saisie et appeler la méthode rangeslider(), qui la convertit en un contrôle de curseur déplaçable.

Lors de l'appel de la méthode rangeslider(), nous avons également passé certains paramètres :

polyfill : false. Ce paramètre indique à jQuery Rangeslider de ne pas utiliser la fonctionnalité polyfill. Polyfill active cette fonctionnalité à l'aide de JavaScript sur les anciens navigateurs qui ne prennent pas en charge le contrôle de curseur HTML5. Mais dans les navigateurs modernes, cette fonctionnalité polyfill est de peu d’utilité. Par conséquent, nous définissons ce paramètre sur false.
onSlide : fonction (position, valeur) {...}. Ce paramètre indique à jQuery Rangeslider ce qui se passe lorsque vous glissez sur le contrôle slider. Dans cet exemple, nous définissons une fonction qui sera appelée à chaque balayage. Cette fonction accepte deux paramètres : la position du curseur et sa valeur actuelle. Nous affichons cette fonction sur la console afin de pouvoir visualiser la sortie de cette fonction dans la console.

Résumé

jQuery Rangeslider est un plug-in jQuery très pratique qui vous permet d'ajouter facilement un contrôle de curseur d'entrée déplaçable à votre page Web. Dans cet article, nous vous avons montré comment installer jQuery Rangeslider et comment l'utiliser pour créer un contrôle slider et transmettre certains paramètres pour personnaliser sa configuration. Nous espérons que cet article vous aidera à démarrer rapidement avec jQuery Rangeslider.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：événement de clic de changement jqueryArticle suivant：événement de clic de changement jquery

Articles Liés

Voir plus