demo(slider): add slider a11y demos (#6230)

* demo(slider): add slider a11y demos

* add description text to each example

src/demo-app/a11y/a11y-module.ts

@@ -5,6 +5,7 @@ import {RouterModule} from '@angular/router';
 import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {DemoMaterialModule} from '../demo-material-module';
 import {AccessibilityDemo, AccessibilityHome} from './a11y';
+import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
@@ -13,7 +14,8 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
-import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
+import {SliderAccessibilityDemo} from './slider/slider-a11y';
+
 
 @NgModule({
   imports: [
@@ -36,6 +38,7 @@ export class AccessibilityRoutingModule {}
   declarations: [
     AccessibilityDemo,
     AccessibilityHome,
+    AutocompleteAccessibilityDemo,
     ButtonAccessibilityDemo,
     ButtonToggleAccessibilityDemo,
     CheckboxAccessibilityDemo,
@@ -44,7 +47,7 @@ export class AccessibilityRoutingModule {}
     GridListAccessibilityDemo,
     InputAccessibilityDemo,
     RadioAccessibilityDemo,
-    AutocompleteAccessibilityDemo,
+    SliderAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -26,5 +26,6 @@ export class AccessibilityDemo {
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Input', route: 'input'},
     {name: 'Radio buttons', route: 'radio'},
+    {name: 'Slider', route: 'slider'},
   ];
 }

src/demo-app/a11y/routes.ts

@@ -1,4 +1,5 @@
 import {Routes} from '@angular/router';
+import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
@@ -8,7 +9,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
-import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
+import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -21,4 +22,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
+  {path: 'slider', component: SliderAccessibilityDemo},
 ];

src/demo-app/a11y/slider/slider-a11y.html

@@ -0,0 +1,39 @@
+<section>
+  <h2>Continuous slider (e.g. color component sliders)</h2>
+  <p>Move the red, green, and blue sliders to choose a color.</p>
+  <div class="demo-color-container">
+    <div class="demo-color-sliders">
+      <div>
+        <label class="demo-color-label" for="r-slider">Red</label>
+        <md-slider id="r-slider" min="0" max="255" [(ngModel)]="red"></md-slider>
+      </div>
+      <div>
+        <label class="demo-color-label" for="g-slider">Green</label>
+        <md-slider id="g-slider" min="0" max="255" [(ngModel)]="green"></md-slider>
+      </div>
+      <div>
+        <label class="demo-color-label" for="b-slider">Blue</label>
+        <md-slider id="b-slider" min="0" max="255" [(ngModel)]="blue"></md-slider>
+      </div>
+    </div>
+  <div class="demo-color-swatch" [style.background]="swatchBackground"></div>
+  </div>
+</section>
+
+<section>
+  <h2>Discrete slider (e.g. rate a product)</h2>
+  <p>Please rate our product on a scale of 1 (not satisfied) to 5 (extremely satisfied).</p>
+  <md-slider min="1" max="5" tickInterval="1" thumbLabel aria-label="Rating"></md-slider>
+</section>
+
+<section>
+  <h2>Vertical slider (e.g. volume control)</h2>
+  <p>Use the slider to adjust the volume.</p>
+  <div class="demo-volume-container">
+    <label for="vol-slider">
+      <md-icon aria-hidden>volume_up</md-icon>
+      <span class="cdk-visually-hidden">Volume</span>
+    </label>
+    <md-slider id="vol-slider" min="0" max="100" vertical inverted></md-slider>
+  </div>
+</section>

src/demo-app/a11y/slider/slider-a11y.scss

@@ -0,0 +1,21 @@
+.demo-color-container {
+  display: flex;
+  align-items: center;
+}
+
+.demo-color-label {
+  display: inline-block;
+  width: 50px;
+}
+
+.demo-color-swatch {
+  width: 60px;
+  height: 60px;
+  margin-left: 60px;
+}
+
+.demo-volume-container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}

src/demo-app/a11y/slider/slider-a11y.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'slider-a11y',
+  templateUrl: 'slider-a11y.html',
+  styleUrls: ['slider-a11y.css'],
+})
+export class SliderAccessibilityDemo {
+  red = 0;
+  green = 0;
+  blue = 0;
+
+  get swatchBackground() {
+    return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+  }
+}