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.
Angular Material Slider Example:
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MyController', function ($scope) {
// controller code goes here..
});
</script>
</head>
<body ng-app="myApp">
<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>
</body>
</html>
|
| Try It On → |
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.
Learn More
Let us have some example and demo about the Angular Material Sliders.
We will soon add some more examples & demo.
Advertisements
