diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index c739dc146193..2641eae973a1 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/src/demo-app/slider/slider-demo.html
@@ -1,55 +1,60 @@
Default Slider
-Label
+Label
{{slidey.value}}
Colors
-
-
-
+
+
+
Slider with Min and Max
-
-
+
+
+
{{slider2.value}}
-
+
Disabled Slider
-
-
+
+
+
Slider with set value
-
+
Slider with step defined
-
+
{{slider5.value}}
Slider with set tick interval
-
-
+
+
Slider with Thumb Label
-
+
Slider with one-way binding
-
-
+
+
Slider with two-way binding
-
-
+
+
Inverted slider
-
+
Vertical slider
-
+
+
Inverted vertical slider
-
+
+
-
+
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index de561657883e..116a55687b23 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -154,6 +154,10 @@ describe('MdSlider', () => {
// Some browsers use '0' and some use '0px', so leave off the closing paren.
expect(trackFillElement.style.transform).toContain('translateX(0');
});
+
+ it('should have aria-orientation horizontal', () => {
+ expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('horizontal');
+ });
});
describe('disabled slider', () => {
@@ -1156,6 +1160,10 @@ describe('MdSlider', () => {
expect(trackFillElement.style.transform).toContain('scaleY(0.39)');
});
+
+ it('should have aria-orientation vertical', () => {
+ expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('vertical');
+ });
});
});
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index bb54d732cfc0..d0860a840626 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -91,6 +91,7 @@ export const _MdSliderMixinBase = mixinDisabled(MdSliderBase);
'[attr.aria-valuemax]': 'max',
'[attr.aria-valuemin]': 'min',
'[attr.aria-valuenow]': 'value',
+ '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
'[class.mat-primary]': 'color == "primary"',
'[class.mat-accent]': 'color != "primary" && color != "warn"',
'[class.mat-warn]': 'color == "warn"',