utilisation du rangeslider jquery-Questions et réponses frontales-php.cn

Maison

interface Web

Questions et réponses frontales

utilisation du rangeslider jquery

王林

May 28, 2023 pm 03:49 PM

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 connexe

Quelles sont les limites de la réaction?May 02, 2025 am 12:26 AM

React'slimitations incluse: 1) asteeplearningCurveTeetoitSvastecosystème, 2) SeochallegenSwithClient-Sideredering, 3) PotentialPormancesuesesuesInlareApplications, 4) complexstatemangationAppsgrow, and5) thendeedtokeepupwithetsrapidevolution.thesfacteurs

Courbe d'apprentissage de React: défis pour les nouveaux développeursMay 02, 2025 am 12:24 AM

ReactisChallengingForbeginnersDuetOtsSteepLearningCurveandParadigmshiftTocomponent-BasedArchitecture.1) startwithofficialDocumentationforasolidfoundation.2) comprendjsxandhowtoembedjavascriptwithinit.3)

Générer des clés stables et uniques pour les listes dynamiques dans la réactionMay 02, 2025 am 12:22 AM

TheCorechallengeingEneratingStable and UniqueKeysfordynamiclistsInReacsensUringConsistentifIendentiveriersafrossre-RendersforefficEntedDomupdates.1) usenaturalkeyswhenpossible, astheyareReliableFunieandandsable.2) GeneraSyTheticKeysBasedonMultipleatTrUtid.

Fatigue JavaScript: rester à jour avec React et ses outilsMay 02, 2025 am 12:19 AM

JavascriptfatigueIrAratingManagable avec des stratégies comme une justice dans le sens

Tester des composants qui utilisent le crochet USESTATE ()May 02, 2025 am 12:13 AM

TOTESTREACTPONENTENTS USINGHEUSESTATATEHOOK, Utilisez JestAndreCtTestSingLibraryTosiMulaterInteractions andVerifyStateChangeSintheUi.1) rendethecomponentandCheckInitialState.2) simuleUseractionSlikeclickSorFormSubMessions.3)

Clés dans React: une plongée profonde dans les techniques d'optimisation des performancesMay 01, 2025 am 12:25 AM

KeysInreactaRuCrucialForoptimizingPerformanceByAidingInIeFicientListupDates.1) UseKeyStoidentifyAndTrackListeLelements.2) EvitusingArrayIndevices aykeystopReventPerformanceIssues.3) ChoosestablerifierserSikeLiDetem.idtOMAINTAINCOMPOINTSTATEANDDIMPROVEPORES

Que sont les clés dans la réaction?May 01, 2025 am 12:25 AM

ReactKeysareUniqueIdentifiants utilisés à la mise en place de la fin de la forme de conciliation.1) Ils sont devenus à la recherche de bilans de liste, 2) en utilisant des demandes et des identifications de liaison liés à la recommandation, 3)

L'importance des clés uniques dans la réaction: éviter les pièges communsMay 01, 2025 am 12:19 AM

UNIQUELYYSARECRUCIALINGREACTFOROPTIMIZERINGRENDERINGAnDSALINGAPONontStAtTate Intelectrity.1) useanaturalineIdentifierfromyOrdataifavailable.2) ifnonaturalientifierexists, générationauqueKeyUsingalibraryLIVEUID.3) EviturAnArrayIndevicesSkeys, Empestiall

See all articles