Maison > Article > interface Web > utilisation du rangeslider jquery
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 :
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!