Fondation - Slider deux poignées

La description

Pour utiliser deux poignées, vous devez utiliser l' étendue et le champ d' entrée .slider-handle . Cela fonctionne pour les curseurs horizontaux et verticaux. Le JavaScript allouera des identifiants pour les champs de saisie, jusqu'à ce que vous le changiez. Si vous ne changez pas, les poignées et les entrées correspondent comme elles sont dans l'arborescence DOM.

Exemple

L'exemple suivant montre comment utiliser le curseur à deux poignées dans Foundation.

<html>
   <head>
      <title>Slider Two Handles</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "slider" data-slider data-initial-start = "30" data-initial-end = "60">
         <span class = "slider-handle" data-slider-handle role = "slider" tabindex = "1"></span>
         <span class = "slider-fill" data-slider-fill></span>
         <span class = "slider-handle" data-slider-handle role = "slider" tabindex = "1"></span>
         <input type = "hidden">
         <input type = "hidden">
      </div>


      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus slider_two_handles.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.