Angular Material - Sliders

The md-slider, an Angular directive is used to show a range component. It has two modes −
normal − User can slide between wide range of values. This mode exists by default.
normal − User can slide between wide range of values. This mode exists by default.
discrete − User can slide between selected values. To enable discrete mode use mddiscrete and step attributes.
discrete − User can slide between selected values. To enable discrete mode use mddiscrete and step attributes.
The following table lists out the parameters and description of the different attributes of the md-slider.
md-discrete
This determines whether to enable discrete mode.
step
The distance between values the user is allowed to pick. By default, it is 1.
min
The minimum value the user is allowed to pick. By default, it is 0.
max
The maximum value the user is allowed to pick. By default, it is 100.
The following example shows the use of md-sidenav and also the uses of sidenav component.
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>
Verify the result.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page