From 2df7f615a4c33841ae92bf43c8365d26e07aba74 Mon Sep 17 00:00:00 2001
From: wagnermaciel <wagnermaciel@google.com>
Date: Fri, 9 Apr 2021 07:40:23 -0700
Subject: [PATCH 1/2] 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
---
 src/dev-app/mdc-slider/mdc-slider-demo.html   | 92 ++++++++++++++-----
 src/dev-app/mdc-slider/mdc-slider-demo.ts     |  9 +-
 .../mdc-slider/slider.ts                      |  9 ++
 3 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/src/dev-app/mdc-slider/mdc-slider-demo.html b/src/dev-app/mdc-slider/mdc-slider-demo.html
index b6bd930eac65..569c71971530 100644
--- a/src/dev-app/mdc-slider/mdc-slider-demo.html
+++ b/src/dev-app/mdc-slider/mdc-slider-demo.html
@@ -1,32 +1,82 @@
-<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>
+
+<h1>Slider with step defined</h1>
+<mat-slider min="1" max="100" step="20">
+  <input #slider5 matSliderThumb>
+</mat-slider>
+{{slider5.value}}
 
-<p>Color: Accent</p>
-<mat-slider color="accent" discrete showTickMarks>
-  <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>
 
-<mat-slider color="accent" discrete showTickMarks disabled>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Slider with Thumb Label</h1>
+<mat-slider discrete>
+  <input matSliderThumb>
 </mat-slider>
 
-<p>Color: Warn</p>
-<mat-slider color="warn" discrete showTickMarks>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Slider with one-way binding</h1>
+<mat-slider step="10">
+  <input [value]="val" matSliderThumb>
 </mat-slider>
+<input [(ngModel)]="val" type="number">
 
-<mat-slider color="warn" discrete showTickMarks disabled>
-  <input value="25" matSliderStartThumb>
-  <input value="75" matSliderEndThumb>
+<h1>Slider with two-way binding</h1>
+<mat-slider step="40">
+  <input [(ngModel)]="demo" matSliderThumb>
 </mat-slider>
+<input [(ngModel)]="demo" type="number">
+
+<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>
diff --git a/src/dev-app/mdc-slider/mdc-slider-demo.ts b/src/dev-app/mdc-slider/mdc-slider-demo.ts
index f339793bbf02..31a8b42cf9b6 100644
--- a/src/dev-app/mdc-slider/mdc-slider-demo.ts
+++ b/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;
+}
diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts
index b738580ec183..927ce8ba1dc8 100644
--- a/src/material-experimental/mdc-slider/slider.ts
+++ b/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;

From 9d71d2e97a984066d1edfda44ec8662254862948 Mon Sep 17 00:00:00 2001
From: wagnermaciel <wagnermaciel@google.com>
Date: Fri, 9 Apr 2021 09:27:31 -0700
Subject: [PATCH 2/2] fixup! feat(material-experimental/mdc-slider): rebuild
 the mdc-slider demo

---
 src/dev-app/mdc-slider/mdc-slider-demo.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/dev-app/mdc-slider/mdc-slider-demo.html b/src/dev-app/mdc-slider/mdc-slider-demo.html
index 569c71971530..68db534874f7 100644
--- a/src/dev-app/mdc-slider/mdc-slider-demo.html
+++ b/src/dev-app/mdc-slider/mdc-slider-demo.html
@@ -80,3 +80,9 @@ <h1>Set/lost focus to show thumblabel programmatically</h1>
     </mat-slider>
   </mat-tab>
 </mat-tab-group>
+
+<h1>Range slider</h1>
+<mat-slider min="200" max="500" step="100" discrete showTickMarks>
+  <input value="300" matSliderStartThumb>
+  <input value="400" matSliderEndThumb>
+</mat-slider>