feat(slider): add md-max class when at max value

add md-max class when at max value. This is to keep
things consistent with the fact that md-min is added when
at min value

fixes #3513. closes #5077.

Author: CarmenPopoviciu

src/components/slider/slider.js

@@ -291,12 +291,13 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
      * @param percent 0-1
      */
     function setSliderPercent(percent) {
-      activeTrack.css('width', (percent * 100) + '%');
-      thumbContainer.css(
-        'left',
-        (percent * 100) + '%'
-      );
-      element.toggleClass('md-min', percent === 0);
+        var percentStr = (percent * 100) + '%';
+
+        activeTrack.css('width', percentStr);
+        thumbContainer.css('left',percentStr);
+
+        element.toggleClass('md-min', percent === 0);
+        element.toggleClass('md-max', percent === 1);
     }
 
 

src/components/slider/slider.spec.js

@@ -137,7 +137,7 @@ describe('md-slider', function() {
     expect(slider[0].querySelector('.md-thumb-text').textContent).toBe('50');
   });
 
-  it('should call $log.warn if aria-label isnt provided', function() {
+  it('should call $log.warn if aria-label isn\'t provided', function() {
     spyOn($log, "warn");
     setup('min="100" max="104" step="2" ng-model="model"');
     expect($log.warn).toHaveBeenCalled();
@@ -216,7 +216,30 @@ describe('md-slider', function() {
     });
     expect(slider).not.toHaveClass('md-active');
   });
-  
+
+  it('should add md-min class only when at min value', function() {
+    var slider = setup('ng-model="model" min="0" max="30"');
+    pageScope.$apply('model = 0');
+    expect(slider).toHaveClass('md-min');
+
+    slider.triggerHandler({type: '$md.dragstart', pointer: {x: 0}});
+    slider.triggerHandler({type: '$md.drag', pointer: {x: 10}});
+    $timeout.flush();
+    expect(slider).not.toHaveClass('md-min');
+  });
+
+  it('should add md-max class only when at max value', function() {
+    var slider = setup('ng-model="model" min="0" max="30"');
+    pageScope.$apply('model = 30');
+    expect(slider).toHaveClass('md-max');
+
+    slider.triggerHandler({type: '$md.dragstart', pointer: {x: 30}});
+    slider.triggerHandler({type: '$md.drag', pointer: {x: 10}});
+    $timeout.flush();
+    expect(slider).not.toHaveClass('md-max');
+  });
+
+
   it('should increment at a predictable step', function() {
 
     buildSlider(0.1, 1).drag({x:70});