feat(material-experimental/mdc-slider): rebuild the mdc-slider demo (#22445)

* feat(material-experimental/mdc-slider): rebuild the mdc-slider demo

* add exportAs: matSliderThumb to MatSliderThumb
* create focus and blur methods in MatSliderThumb to match the old demo

Author: wagnermaciel

src/dev-app/mdc-slider/mdc-slider-demo.html

@@ -1,32 +1,88 @@
-<p>Color: Primary</p>
-<mat-slider color="primary" discrete showTickMarks>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Default Slider</h1>
+<span>Label</span>
+<mat-slider>
+  <input #slidey matSliderThumb>
 </mat-slider>
+{{slidey.value}}
 
-<mat-slider color="primary" discrete showTickMarks disabled>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Colors</h1>
+<mat-slider color="primary" discrete>
+  <input value="50" matSliderThumb>
+</mat-slider>
+<mat-slider color="accent" discrete>
+  <input value="50" matSliderThumb>
+</mat-slider>
+<mat-slider color="warn">
+  <input value="50" matSliderThumb>
+</mat-slider>
+
+<h1>Slider with Min and Max</h1>
+<input [(ngModel)]="min" type="number">
+<mat-slider [min]="min" [max]="max" step="5" discrete showTickMarks>
+  <input #slider2 matSliderThumb>
+</mat-slider>
+{{slider2.value}}
+<input [(ngModel)]="max" type="number">
+
+<h1>Disabled Slider</h1>
+<mat-slider disabled [step]="1">
+  <input [(ngModel)]="disabledValue" matSliderThumb>
+</mat-slider>
+<input [(ngModel)]="disabledValue" type="number">
+
+<h1>Slider with set value</h1>
+<mat-slider>
+  <input value="43" matSliderThumb>
 </mat-slider>
 
-<p>Color: Accent</p>
-<mat-slider color="accent" discrete showTickMarks>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Slider with step defined</h1>
+<mat-slider min="1" max="100" step="20">
+  <input #slider5 matSliderThumb>
 </mat-slider>
+{{slider5.value}}
 
-<mat-slider color="accent" discrete showTickMarks disabled>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Slider with set tick interval</h1>
+<mat-slider discrete showTickMarks>
+  <input matSliderThumb>
 </mat-slider>
+<mat-slider step="9" discrete showTickMarks>
+  <input matSliderThumb>
+</mat-slider>
+
+<h1>Slider with Thumb Label</h1>
+<mat-slider discrete>
+  <input matSliderThumb>
+</mat-slider>
+
+<h1>Slider with one-way binding</h1>
+<mat-slider step="10">
+  <input [value]="val" matSliderThumb>
+</mat-slider>
+<input [(ngModel)]="val" type="number">
+
+<h1>Slider with two-way binding</h1>
+<mat-slider step="40">
+  <input [(ngModel)]="demo" matSliderThumb>
+</mat-slider>
+<input [(ngModel)]="demo" type="number">
 
-<p>Color: Warn</p>
-<mat-slider color="warn" discrete showTickMarks>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Set/lost focus to show thumblabel programmatically</h1>
+<mat-slider discrete>
+  <input #demoSlider="matSliderThumb" matSliderThumb>
 </mat-slider>
+<button (click)="demoSlider.focus()">Focus Slider</button>
+<button (click)="demoSlider.blur()">Blur Slider</button>
+
+<mat-tab-group>
+  <mat-tab label="One">
+    <mat-slider min="1" max="5">
+      <input value="3" matSliderThumb>
+    </mat-slider>
+  </mat-tab>
+</mat-tab-group>
 
-<mat-slider color="warn" discrete showTickMarks disabled>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Range slider</h1>
+<mat-slider min="200" max="500" step="100" discrete showTickMarks>
+  <input value="300" matSliderStartThumb>
+  <input value="400" matSliderEndThumb>
 </mat-slider>

src/dev-app/mdc-slider/mdc-slider-demo.ts

@@ -12,5 +12,12 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'mdc-slider-demo',
   templateUrl: 'mdc-slider-demo.html',
+  styles: ['.mat-mdc-slider { display: inline-block; width: 300px; }'],
 })
-export class MdcSliderDemo {}
+export class MdcSliderDemo {
+  demo: number;
+  val: number = 50;
+  min: number = 0;
+  max: number = 100;
+  disabledValue = 0;
+}

src/material-experimental/mdc-slider/slider.ts

@@ -264,6 +264,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
  */
 @Directive({
   selector: 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]',
+  exportAs: 'matSliderThumb',
   host: {
     'class': 'mdc-slider__input',
     'type': 'range',
@@ -423,6 +424,14 @@ export class MatSliderThumb implements AfterViewInit, ControlValueAccessor, OnIn
     this._slider._updateDisabled();
   }
 
+  focus(): void {
+    this._hostElement.focus();
+  }
+
+  blur(): void {
+    this._hostElement.blur();
+  }
+
   /** Returns true if this slider input currently has focus. */
   _isFocused(): boolean {
     return this._document.activeElement === this._hostElement;