Matériau angulaire - curseurs

Le md-slider, une directive angulaire, est utilisé pour afficher un composant de plage. Il a deux modes -

  • normal- L'utilisateur peut glisser entre une large gamme de valeurs. Ce mode existe par défaut.

  • discrete- L'utilisateur peut glisser entre les valeurs sélectionnées. Pour activer le mode discret, utilisez les attributs mddiscrete et step.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs du md-slider.

Sr. Non Paramètre et description
1

md-discrete

Cela détermine s'il faut activer le mode discret.
2

step

La distance entre les valeurs que l'utilisateur est autorisé à choisir. Par défaut, c'est 1.
3

min

Valeur minimale que l'utilisateur est autorisé à choisir. Par défaut, il vaut 0.
4

max

La valeur maximale que l'utilisateur est autorisé à choisir. Par défaut, il est de 100.

Exemple

L'exemple suivant montre l'utilisation de md-sidenav ainsi que les utilisations du composant sidenav.

am_sliders.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('sliderController', sliderController);

         function sliderController ($scope, $mdSidenav) {
            $scope.color = {
               red: Math.floor(Math.random() * 255),
               green: Math.floor(Math.random() * 255),
               blue: Math.floor(Math.random() * 255)
            };
            $scope.rating = 3;        
            $scope.disabled = 70;
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "sliderContainer" ng-controller = "sliderController as ctrl"
         layout = "row" ng-cloak>
         <md-content style = "margin: 16px; padding:16px">
            <div layout>
               <h4 style = "margin-top:10px">Default</h4>		
               <md-slider flex min = "0" max = "255" ng-model = "color.red"
                  aria-label = "red" id = "red-slider" class></md-slider>
               <div flex = "20" layout layout-align = "center center">
                  <input flex type = "number" ng-model = "color.red" aria-label = "red"
                     aria-controls = "red-slider">
               </div>
            </div>
            
            <div layout>
               <h4 style = "margin-top:10px">Warning</h4>		
               <md-slider class = "md-warn" flex min = "0" max = "255"
                  ng-model = "color.green" aria-label = "green" id = "green-slider">
                  </md-slider>
               <div flex = "20" layout layout-align = "center center">
                  <input flex type = "number" ng-model = "color.green"
                     aria-label = "green" aria-controls = "green-slider">
               </div>
            </div>
            
            <div layout>
               <h4 style = "margin-top:10px">Primary</h4>		
               <md-slider class = "md-primary" flex min = "0" max = "255"
                  ng-model = "color.blue" aria-label = "blue" id = "blue-slider">
                  </md-slider>
               <div flex = "20" layout layout-align = "center center">
                  <input flex type = "number" ng-model = "color.blue" aria-label = "blue"
                     aria-controls = "blue-slider">
               </div>
            </div>
            
            <div layout>
               <h4 style = "margin-top:10px">Discrete</h4>		
               <md-slider flex md-discrete ng-model = "rating" step = "1" min = "1"
                  max = "5" aria-label = "rating"></md-slider>
               <div flex = "20" layout layout-align = "center center">
                  <input flex type = "number" ng-model = "rating" aria-label = "rating"
                     aria-controls = "rating-slider">
               </div>
            </div>
            
            <div layout>
               <h4 style = "margin-top:10px">Disabled</h4>		               
               <md-slider flex min = "0" max = "255" ng-model = "disabled"
                  ng-disabled = "true" aria-label = "Disabled"></md-slider>              
            </div>
            
            <div layout>
               <h4 style = "margin-top:10px">Disabled, Discrete</h4>		               
               <md-slider flex md-discrete ng-model = "rating" step = "1" min = "1"
                  max = "5" aria-label = "disabled"  ng-disabled = "true"></md-slider>      
            </div>
         </md-content>
      
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.