diff --git a/src/components/slider/demoBasicUsage/index.html b/src/components/slider/demoBasicUsage/index.html index 4422f0d9d64..9f9c6a84efa 100644 --- a/src/components/slider/demoBasicUsage/index.html +++ b/src/components/slider/demoBasicUsage/index.html @@ -44,15 +44,15 @@

Rating: {{rating1}}/5 - demo of theming classes

default
- - +
md-warn
+ aria-label="md-warn">
@@ -60,7 +60,7 @@

Rating: {{rating1}}/5 - demo of theming classes

md-primary
+ aria-label="md-primary"> @@ -69,10 +69,12 @@

Rating: {{rating1}}/5 - demo of theming classes

Disabled

- + - + Is disabled @@ -93,20 +95,23 @@

Invert

Regular
- + + - +
- Invert + Inverted
- + - +
diff --git a/src/components/slider/demoBasicUsage/script.js b/src/components/slider/demoBasicUsage/script.js index 234104c7ece..e203068db5f 100644 --- a/src/components/slider/demoBasicUsage/script.js +++ b/src/components/slider/demoBasicUsage/script.js @@ -1,9 +1,8 @@ -angular.module('sliderDemo1', ['ngMaterial']) +angular.module('sliderDemoBasic', ['ngMaterial']) .config(function ($mdIconProvider) { $mdIconProvider.iconSet('device', 'img/icons/sets/device-icons.svg', 24); }) .controller('AppCtrl', function ($scope) { - $scope.color = { red: Math.floor(Math.random() * 255), green: Math.floor(Math.random() * 255), diff --git a/src/components/slider/demoVertical/index.html b/src/components/slider/demoVertical/index.html index a87fd539b17..b0a76aac6af 100644 --- a/src/components/slider/demoVertical/index.html +++ b/src/components/slider/demoVertical/index.html @@ -4,27 +4,27 @@ - - +
Volume
- + - - +
Bass
- + + ng-readonly="readonly" id="master-slider">
Master
Read only diff --git a/src/components/slider/demoVertical/script.js b/src/components/slider/demoVertical/script.js index 44290118682..5c376b78de1 100644 --- a/src/components/slider/demoVertical/script.js +++ b/src/components/slider/demoVertical/script.js @@ -1,9 +1,6 @@ - -angular.module('sliderDemo2', ['ngMaterial']) - +angular.module('sliderDemoVertical', ['ngMaterial']) .controller('AppCtrl', function($scope) { - $scope.vol = Math.floor(Math.random() * 100); - $scope.bass = Math.floor(Math.random() * 100); - $scope.master = Math.floor(Math.random() * 100); + $scope.bass = 40; + $scope.master = 80; }); diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js index e1dfe309b68..ae6ea09def9 100644 --- a/src/components/slider/slider.js +++ b/src/components/slider/slider.js @@ -213,7 +213,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi if (tAttrs.disabled || tAttrs.ngDisabled) wrapper.attr('tabindex', -1); - tElement.attr('role', 'slider'); + wrapper.attr('role', 'slider'); $mdAria.expect(tElement, 'aria-label'); @@ -312,13 +312,13 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi function updateMin(value) { min = parseFloat(value); ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max); - element.attr('aria-valuemin', value); + wrapper.attr('aria-valuemin', value); updateAll(); } function updateMax(value) { max = parseFloat(value); ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max); - element.attr('aria-valuemax', value); + wrapper.attr('aria-valuemax', value); updateAll(); } function updateStep(value) { @@ -496,7 +496,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi var percent = valueToPercent(ngModelCtrl.$viewValue); scope.modelValue = ngModelCtrl.$viewValue; - element.attr('aria-valuenow', ngModelCtrl.$viewValue); + wrapper.attr('aria-valuenow', ngModelCtrl.$viewValue); setSliderPercent(percent); thumbText.text(ngModelCtrl.$viewValue); } diff --git a/src/components/slider/slider.spec.js b/src/components/slider/slider.spec.js index b48febafdce..5609660a8a4 100644 --- a/src/components/slider/slider.spec.js +++ b/src/components/slider/slider.spec.js @@ -48,13 +48,13 @@ describe('md-slider', function() { it('should not set model below the min', function() { var slider = setup('ng-model="value" min="0" max="100"'); pageScope.$apply('value = -50'); - expect(slider.attr('aria-valuenow')).toEqual('0'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('0'); }); it('should not set model above the max', function() { var slider = setup('ng-model="value" min="0" max="100"'); pageScope.$apply('value = 150'); - expect(slider.attr('aria-valuenow')).toEqual('100'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100'); }); it('should set model on press', function() { @@ -145,19 +145,19 @@ describe('md-slider', function() { pageScope.max = 5; pageScope.model = 5; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('5'); - expect(slider.attr('aria-valuemax')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5'); pageScope.model = 6; pageScope.max = 6; pageScope.$apply(); }); it('should have updated max correctly', function () { - expect(slider.attr('aria-valuemax')).toEqual('6'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('6'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('6'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6'); }); }); @@ -171,19 +171,19 @@ describe('md-slider', function() { pageScope.max = 4; pageScope.model = 3; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('3'); - expect(slider.attr('aria-valuemax')).toEqual('4'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4'); pageScope.model = 6; pageScope.max = 7; pageScope.$apply(); }); it('should have updated max correctly', function () { - expect(slider.attr('aria-valuemax')).toEqual('7'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('7'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('6'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6'); }); }); @@ -197,19 +197,19 @@ describe('md-slider', function() { pageScope.max = 4; pageScope.model = 2; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('2'); - expect(slider.attr('aria-valuemax')).toEqual('4'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4'); pageScope.model = 3; pageScope.max = 5; pageScope.$apply(); }); it('should have updated max correctly', function () { - expect(slider.attr('aria-valuemax')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('3'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3'); }); }); @@ -223,19 +223,19 @@ describe('md-slider', function() { pageScope.min = 5; pageScope.model = 5; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('5'); - expect(slider.attr('aria-valuemin')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5'); pageScope.model = 2; pageScope.min = 2; pageScope.$apply(); }); it('should have updated min correctly', function () { - expect(slider.attr('aria-valuemin')).toEqual('2'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('2'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2'); }); }); @@ -249,19 +249,19 @@ describe('md-slider', function() { pageScope.min = 5; pageScope.model = 6; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('6'); - expect(slider.attr('aria-valuemin')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5'); pageScope.model = 3; pageScope.min = 2; pageScope.$apply(); }); it('should have updated min correctly', function () { - expect(slider.attr('aria-valuemin')).toEqual('2'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('3'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3'); }); }); @@ -275,19 +275,19 @@ describe('md-slider', function() { pageScope.min = 5; pageScope.model = 7; pageScope.$apply(); - expect(slider.attr('aria-valuenow')).toEqual('7'); - expect(slider.attr('aria-valuemin')).toEqual('5'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('7'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5'); pageScope.model = 6; pageScope.min = 2; pageScope.$apply(); }); it('should have updated min correctly', function () { - expect(slider.attr('aria-valuemin')).toEqual('2'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2'); }); it('should have updated value correctly', function () { - expect(slider.attr('aria-valuenow')).toEqual('6'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6'); }); }); @@ -346,17 +346,17 @@ describe('md-slider', function() { pageScope.$apply('model = 102'); - expect(slider.attr('role')).toEqual('slider'); - expect(slider.attr('aria-valuemin')).toEqual('100'); - expect(slider.attr('aria-valuemax')).toEqual('104'); - expect(slider.attr('aria-valuenow')).toEqual('102'); + expect(wrapper.attr('role')).toEqual('slider'); + expect(getWrapper(slider).attr('aria-valuemin')).toEqual('100'); + expect(getWrapper(slider).attr('aria-valuemax')).toEqual('104'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('102'); wrapper.triggerHandler({ type: 'keydown', keyCode: $mdConstant.KEY_CODE.LEFT_ARROW }); $timeout.flush(); - expect(slider.attr('aria-valuenow')).toEqual('100'); + expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100'); }); it('should ignore pressdown events when disabled', function() {