- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
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.
discrete − User can slide between selected values. To enable discrete mode use mddiscrete and step attributes.
Attributes
The following table lists out the parameters and description of the different attributes of the md-slider.
Sr.No | Parameter & Description |
---|---|
1 | md-discrete This determines whether to enable discrete mode. |
2 | step The distance between values the user is allowed to pick. By default, it is 1. |
3 | min The minimum value the user is allowed to pick. By default, it is 0. |
4 | max The maximum value the user is allowed to pick. By default, it is 100. |
Example
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>
Result
Verify the result.