var app = angular.module('StarterApp', ['ngMaterial']);
.overflow-hidden{
overflow: hidden;
}
md-slider:not(.active) .md-thumb-container{
transition: transform .4s cubic-bezier(.25,.8,.25,1)!important;
}
md-slider:not(.active) .md-track-fill{
transition: width .4s cubic-bezier(.25,.8,.25,1)!important;
}
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
</head>
<body layout="column">
<div>
<!-- overflow-hidden because the scrolling (known issue) -->
<md-content class="md-padding overflow-hidden">
<h3>Demo</h3>
<div layout>
<md-slider flex md-discrete step="1" min="1" max="25" aria-label="rating" ng-model="value">
</md-slider>
</div>
<p>Value = {{value}}</p>
</md-content>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
</body>
</html>
when sliding ng-model
value does not update in md-slider
when using the md-discrete
directive. It works fine without it. How can this be resolved to work with md-discrete
?