From c9136ea9792a08ccf728ebcc68448032194d9b6d Mon Sep 17 00:00:00 2001 From: Carmen Popoviciu Date: Fri, 9 Oct 2015 04:24:57 +0200 Subject: [PATCH] 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 --- src/components/slider/slider.js | 13 +++++++------ src/components/slider/slider.spec.js | 27 +++++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js index 8adf868fa4..1ef27cc215 100644 --- a/src/components/slider/slider.js +++ b/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); } diff --git a/src/components/slider/slider.spec.js b/src/components/slider/slider.spec.js index 5d70dad9f6..a01485f6a9 100644 --- a/src/components/slider/slider.spec.js +++ b/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});