<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="TestCtrl" layout="column" style="padding: 20px;">
<div>
<p>Change "Half value" in the md-select box to alter "Value" to 2*"Half value" and the slider's max to 2*"Half value"+1.</p>
<p>Observe the slider position after the change. When you increase "Half value", the position is incorrect. Press the up arrow once and then the down arrow once on the numerical "Value" input to see the correct position for the updated value.</p>
<p>Changing the value in a $timeout call instead of an immediate change appears to work around the problem, resulting in the correct position (see commented code in script.js).</p>
</div>
<md-input-container class="md-block">
<label>Half value</label>
<md-select ng-model="halfValue" ng-change="halfValueChanged()">
<md-option ng-repeat="hv in halfValues" ng-value="hv">
{{hv}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<label>Value</label>
<div layout="row">
<md-slider id="value-slider" flex ng-model="value" md-discrete step="1" min="1" max="{{maxValue}}"></md-slider>
<input flex="15" type="number" min="1" max="{{maxValue}}" ng-model="value" aria-controls="value-slider"/>
</div>
</md-input-container>
<div>
Half value is {{halfValue}}.
</div>
<div>
Value is {{value}}.
</div>
<div>
Maximum slider value is {{maxValue}}.
</div>
</div>
</body>
</html>
angular
.module('YourApp', ['ngMaterial'])
.controller('TestCtrl', function($scope, $timeout) {
$scope.halfValueChanged = function() {
$scope.maxValue = $scope.halfValue * 2 + 1;
// Comment out next line and uncomment $timeout version and the slider position is updated correctly
$scope.value = $scope.halfValue * 2;
//$timeout(function() { $scope.value = $scope.halfValue * 2; }, 0, true);
}
$scope.halfValues = [1, 2, 3];
$scope.halfValue = 2;
$scope.readonly = 1;
$scope.halfValueChanged();
});
/* Styles go here */
.div {
padding-bottom: 10px;
}
.md-input-container {
padding-bottom: 10px;
}