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() {