Angular Material Slider

Angular Material Slider: md-slider directive is used to create slider in Angular Material. This is an important component of Angular Material, As the web app development trend is changing day by day everyone wants mobile first application so it is new presentation to select range. Here in this tutorial we are going to explain how you can create slider in Angular Material. You can also use our online editor to edit and run the code online.

Angular Material Slider Example

Let us create a simple example to understand how Angular Material slider works.

   
      
      
      
      
      
      
	  
	 
      
      
   
   
  <div ng-controller="MyController as ctrl" ng-cloak=""> 
  <md-content layout-padding="">  
  <md-slider ng-model="myRange" min="5" max="200">
  </md-slider>
  </md-content>
  </div>
  
                                                                                                                                                                                                                                                               

In the above example md-slider directive is used to create the slider. ng-model is used to assign the myRange Model which will handle the slider actions. Min and max attributes are used to set the maximun and minimum value.

If you run the above example it produce the output something like this –

Options Available

Options available for this are –

• 
  md-discrete(boolean):
  This is used to enable the discrete mode.
• 
  md-invert(boolean):
  This is used to enable the invert mode.
• 
  step(number):
  The distance between values the user is allowed to pick. Default 1.
• 
  min(number)
  The minimum value allowed to select and the Default value for it is 0.
• 
  max(number):
  The maximum value allowed to select and the Default value for it is 100.
• 
  round(number)
  This is used to round the decimal numbers the Default value is 3.

We will soon add some more examples & demo.