docs(material/slider): switch examples to use MDC

Switches the slider examples to use the MDC slider. Also updates the guide and adds an example of a range slider.

I also ended up removing the slider from the "Getting started" guide since the new API is a bit more complicated than the old one.

Author: crisbeto

guides/getting-started.md

@@ -53,26 +53,26 @@ You're done! Angular Material is now configured to be used in your application.
 
 ### Display a component
 
-Let's display a slider component in your app and verify that everything works.
+Let's display a slide toggle component in your app and verify that everything works.
 
-You need to import the `MatSliderModule` that you want to display by adding the following lines to
+You need to import the `MatSlideToggleModule` that you want to display by adding the following lines to
 your `app.module.ts` file.
 
 ```ts
-import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @NgModule ({
   imports: [
-    MatSliderModule,
+    MatSlideToggleModule,
   ]
 })
 class AppModule {}
 ```
 
-Add the `<mat-slider>` tag to the `app.component.html` like so:
+Add the `<mat-slide-toggle>` tag to the `app.component.html` like so:
 
 ```html
-<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
+<mat-slide-toggle>Toggle me!</mat-slide-toggle>
 ```
 
 Run your local dev server:
@@ -83,7 +83,7 @@ ng serve
 
 Then point your browser to [http://localhost:4200](http://localhost:4200)
 
-You should see the Material slider component on the page.
+You should see the Material slide toggle component on the page.
 
 In addition to the installation schematic, Angular Material comes with
 [several other schematics](https://material.angular.io/guide/schematics) (like nav, table,

src/components-examples/material/slider/BUILD.bazel

@@ -15,11 +15,11 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-card",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-input",
-        "//src/material/legacy-slider",
-        "//src/material/legacy-slider/testing",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/input",
+        "//src/material/slider",
+        "//src/material/slider/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":slider",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-slider",
-        "//src/material/legacy-slider/testing",
+        "//src/material/slider",
+        "//src/material/slider/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

src/components-examples/material/slider/index.ts

@@ -1,37 +1,40 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatInputModule} from '@angular/material/input';
+import {MatSliderModule} from '@angular/material/slider';
 import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example';
 import {SliderFormattingExample} from './slider-formatting/slider-formatting-example';
 import {SliderOverviewExample} from './slider-overview/slider-overview-example';
 import {SliderHarnessExample} from './slider-harness/slider-harness-example';
+import {SliderRangeExample} from './slider-range/slider-range-example';
 
 export {
   SliderConfigurableExample,
   SliderFormattingExample,
   SliderHarnessExample,
   SliderOverviewExample,
+  SliderRangeExample,
 };
 
 const EXAMPLES = [
   SliderConfigurableExample,
   SliderFormattingExample,
   SliderHarnessExample,
   SliderOverviewExample,
+  SliderRangeExample,
 ];
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyCardModule,
-    MatLegacyCheckboxModule,
-    MatLegacyInputModule,
-    MatLegacySliderModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatSliderModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

src/components-examples/material/slider/slider-configurable/slider-configurable-example.css

@@ -1,5 +1,6 @@
 .example-h2 {
-  margin: 0 8px 16px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .example-section {
@@ -12,44 +13,32 @@
 .example-margin {
   margin: 8px;
 }
+
 .example-width {
   max-width: 180px;
   width: 100%;
 }
 
-.mat-slider-horizontal {
+.mat-mdc-slider {
   max-width: 300px;
   width: 100%;
 }
 
-.mat-slider-vertical {
-  height: 300px;
-}
-
-.mat-card + .mat-card {
+.mat-mdc-card + .mat-mdc-card {
   margin-top: 8px;
 }
 
 .example-result-card h2 {
   margin: 0 8px;
 }
 
-.example-result-card .example-label-container.example-label-horizontal {
+.example-label-container {
   display: flex;
   justify-content: space-between;
-  margin: 0 0 12px 16px;
+  margin: 20px 10px 0;
   max-width: 284px;
 }
 
-.example-result-card .example-label-container.example-label-vertical {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 68px;
-  height: 48px;
-}
-
 .example-result-card .example-value-label {
   font-weight: 600;
 }

src/components-examples/material/slider/slider-configurable/slider-configurable-example.html

@@ -22,54 +22,36 @@ <h2 class="example-h2">Slider configuration</h2>
     </section>
 
     <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="showTicks">Show ticks</mat-checkbox>
-      <mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
-        Auto ticks
-      </mat-checkbox>
-      <mat-form-field class="example-margin example-width" appearance="fill" *ngIf="showTicks && !autoTicks">
-        <mat-label>Tick interval</mat-label>
-        <input matInput type="number" [(ngModel)]="tickInterval">
-      </mat-form-field>
+      <mat-checkbox [(ngModel)]="showTicks">Show ticks</mat-checkbox>
     </section>
 
     <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
+      <mat-checkbox [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
     </section>
 
     <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="vertical">Vertical</mat-checkbox>
-      <mat-checkbox class="example-margin" [(ngModel)]="invert">Inverted</mat-checkbox>
+      <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
     </section>
-
-    <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
-    </section>
-
   </mat-card-content>
 </mat-card>
 
 <mat-card class="example-result-card">
   <mat-card-content>
     <h2>Result</h2>
-    <br>
-    <br>
 
-    <div class="example-label-container" [class]="vertical ? 'example-label-vertical' : 'example-label-horizontal'">
-      <label id="example-name-label" class="example-name-label">Max Value</label>
+    <div class="example-label-container">
+      <label id="example-name-label" class="example-name-label">Value</label>
       <label class="example-value-label">{{value}}</label>
     </div>
     <mat-slider
         class="example-margin"
         [disabled]="disabled"
-        [invert]="invert"
         [max]="max"
         [min]="min"
         [step]="step"
-        [thumbLabel]="thumbLabel"
-        [tickInterval]="getSliderTickInterval()"
-        [(ngModel)]="value"
-        [vertical]="vertical"
-        aria-labelledby="example-name-label">
+        [discrete]="thumbLabel"
+        [showTickMarks]="showTicks">
+      <input matSliderThumb [(ngModel)]="value">
     </mat-slider>
   </mat-card-content>
 </mat-card>

src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts

@@ -9,23 +9,11 @@ import {Component} from '@angular/core';
   styleUrls: ['slider-configurable-example.css'],
 })
 export class SliderConfigurableExample {
-  autoTicks = false;
   disabled = false;
-  invert = false;
   max = 100;
   min = 0;
   showTicks = false;
   step = 1;
   thumbLabel = false;
   value = 0;
-  vertical = false;
-  tickInterval = 1;
-
-  getSliderTickInterval(): number | 'auto' {
-    if (this.showTicks) {
-      return this.autoTicks ? 'auto' : this.tickInterval;
-    }
-
-    return 0;
-  }
 }

src/components-examples/material/slider/slider-formatting/slider-formatting-example.html

@@ -1,8 +1,3 @@
-<mat-slider
-  thumbLabel
-  [displayWith]="formatLabel"
-  tickInterval="1000"
-  step="1000"
-  min="0"
-  max="100000"
-  aria-label="units"></mat-slider>
+<mat-slider min="0" max="100000" step="1000" showTickMarks discrete [displayWith]="formatLabel">
+  <input matSliderThumb>
+</mat-slider>

src/components-examples/material/slider/slider-formatting/slider-formatting-example.ts

@@ -9,11 +9,11 @@ import {Component} from '@angular/core';
   styleUrls: ['slider-formatting-example.css'],
 })
 export class SliderFormattingExample {
-  formatLabel(value: number) {
+  formatLabel(value: number): string {
     if (value >= 1000) {
       return Math.round(value / 1000) + 'k';
     }
 
-    return value;
+    return `${value}`;
   }
 }

src/components-examples/material/slider/slider-harness/slider-harness-example.html

@@ -1 +1,3 @@
-<mat-slider value="50" aria-label="unit(s)"></mat-slider>
+<mat-slider>
+  <input matSliderThumb value="50">
+</mat-slider>

src/components-examples/material/slider/slider-harness/slider-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacySliderHarness} from '@angular/material/legacy-slider/testing';
+import {MatSliderHarness} from '@angular/material/slider/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {SliderHarnessExample} from './slider-harness-example';
 
 describe('SliderHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('SliderHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacySliderModule],
+      imports: [MatSliderModule],
       declarations: [SliderHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SliderHarnessExample);
@@ -20,31 +20,34 @@ describe('SliderHarnessExample', () => {
   });
 
   it('should load all slider harnesses', async () => {
-    const sliders = await loader.getAllHarnesses(MatLegacySliderHarness);
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
     expect(sliders.length).toBe(1);
   });
 
-  it('should get value of slider', async () => {
-    const slider = await loader.getHarness(MatLegacySliderHarness);
-    expect(await slider.getValue()).toBe(50);
+  it('should get value of slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getEndThumb();
+    expect(await thumb.getValue()).toBe(50);
   });
 
-  it('should get percentage of slider', async () => {
-    const slider = await loader.getHarness(MatLegacySliderHarness);
-    expect(await slider.getPercentage()).toBe(0.5);
+  it('should get percentage of slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getEndThumb();
+    expect(await thumb.getPercentage()).toBe(0.5);
   });
 
-  it('should get max value of slider', async () => {
-    const slider = await loader.getHarness(MatLegacySliderHarness);
+  it('should get max value of slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
     expect(await slider.getMaxValue()).toBe(100);
   });
 
-  it('should be able to set value of slider', async () => {
-    const slider = await loader.getHarness(MatLegacySliderHarness);
-    expect(await slider.getValue()).toBe(50);
+  it('should be able to set value of slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getEndThumb();
+    expect(await thumb.getValue()).toBe(50);
 
-    await slider.setValue(33);
+    await thumb.setValue(33);
 
-    expect(await slider.getValue()).toBe(33);
+    expect(await thumb.getValue()).toBe(33);
   });
 });

src/components-examples/material/slider/slider-overview/slider-overview-example.html

@@ -1 +1,3 @@
-<mat-slider aria-label="unit(s)"></mat-slider>
+<mat-slider>
+  <input matSliderThumb>
+</mat-slider>

src/components-examples/material/slider/slider-range/slider-range-example.css

@@ -0,0 +1,3 @@
+mat-slider {
+  width: 300px;
+}

src/components-examples/material/slider/slider-range/slider-range-example.html

@@ -0,0 +1,4 @@
+<mat-slider min="200" max="500">
+  <input value="300" matSliderStartThumb>
+  <input value="400" matSliderEndThumb>
+</mat-slider>

src/components-examples/material/slider/slider-range/slider-range-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Range slider
+ */
+@Component({
+  selector: 'slider-range-example',
+  templateUrl: 'slider-range-example.html',
+  styleUrls: ['slider-range-example.css'],
+})
+export class SliderRangeExample {}