fix(slider): update discrete slider thumb text while dragging

Closes #622. Closes #628.

src/components/slider/slider.js

@@ -60,7 +60,7 @@ function SliderDirective($mdTheming) {
         '<div class="md-focus-thumb"></div>' +
         '<div class="md-focus-ring"></div>' +
         '<div class="md-sign">' +
-          '<span class="md-thumb-text" ng-bind="modelValue"></span>' +
+          '<span class="md-thumb-text"></span>' +
         '</div>' +
         '<div class="md-disabled-thumb"></div>' +
       '</div>',
@@ -94,6 +94,7 @@ function SliderController($scope, $element, $attrs, $$rAF, $window, $mdAria, $md
 
   this.init = function init(ngModelCtrl) {
     var thumb = angular.element($element[0].querySelector('.md-thumb'));
+    var thumbText = angular.element($element[0].querySelector('.md-thumb-text'));
     var thumbContainer = thumb.parent();
     var trackContainer = angular.element($element[0].querySelector('.md-track-container'));
     var activeTrack = angular.element($element[0].querySelector('.md-track-fill'));
@@ -367,7 +368,10 @@ function SliderController($scope, $element, $attrs, $$rAF, $window, $mdAria, $md
      * @param x
      */
     function adjustThumbPosition( x ) {
+      var exactVal = percentToValue( positionToPercent( x ));
+      var closestVal = minMaxValidator( stepValidator(exactVal) );
       setSliderPercent( positionToPercent(x) );
+      thumbText.text( closestVal );
     }
 
     /**

src/components/slider/slider.spec.js

@@ -41,6 +41,24 @@ describe('md-slider', function() {
     expect($rootScope.value).toBe(50);
   }));
 
+  it('should set model on drag', inject(function($compile, $rootScope, $timeout) {
+    var slider = $compile('<md-slider ng-model="value" min="0" max="100" md-discrete>')($rootScope);
+    $rootScope.$apply('value = 50');
+    var sliderCtrl = slider.controller('mdSlider');
+
+    spyOn(slider[0].querySelector('.md-track-container'), 'getBoundingClientRect').andReturn({
+      width: 100,
+      left: 0,
+      right: 0
+    });
+
+    sliderCtrl._onInput( simulateEventAt( 30, Hammer.INPUT_START ));
+    $timeout.flush();
+
+    sliderCtrl._onPan( simulateEventAt( 80 ));
+    expect(slider[0].querySelector('.md-thumb-text').textContent).toBe('80');
+  }));
+
   it('should increment model on right arrow', inject(function($compile, $rootScope, $timeout, $mdConstant) {
     var slider = $compile(
       '<md-slider min="100" max="104" step="2" ng-model="model">'