feat(material-experimental/mdc-slider): implement the mdc slider

scripts/check-mdc-exports-config.ts

@@ -1,6 +1,6 @@
 export const config = {
   // The MDC sidenav hasn't been implemented yet.
-  skippedPackages: ['mdc-sidenav'],
+  skippedPackages: ['mdc-sidenav', 'mdc-slider'],
   skippedExports: {
     'mdc-chips': [
       // These components haven't been implemented for MDC due to a different accessibility pattern.

src/cdk/testing/testbed/fake-events/dispatch-events.ts

@@ -65,6 +65,7 @@ export function dispatchPointerEvent(node: Node, type: string, clientX = 0, clie
  * Shorthand to dispatch a touch event on the specified coordinates.
  * @docs-private
  */
-export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0) {
-  return dispatchEvent(node, createTouchEvent(type, x, y));
+export function dispatchTouchEvent(node: Node, type: string, pageX = 0, pageY = 0, clientX = 0,
+                                   clientY = 0) {
+  return dispatchEvent(node, createTouchEvent(type, pageX, pageY, clientX, clientY));
 }

src/cdk/testing/testbed/fake-events/event-objects.ts

@@ -79,11 +79,11 @@ export function createPointerEvent(type: string, clientX = 0, clientY = 0,
  * Creates a browser TouchEvent with the specified pointer coordinates.
  * @docs-private
  */
-export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
+export function createTouchEvent(type: string, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
   const event = document.createEvent('UIEvent');
-  const touchDetails = {pageX, pageY};
+  const touchDetails = {pageX, pageY, clientX, clientY};
 
   // TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
   (event as any).initUIEvent(type, true, true, window, 0);

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

@@ -1,53 +1,88 @@
 <h1>Default Slider</h1>
-Label <mat-slider #slidey aria-label="Basic slider"></mat-slider>
+<span>Label</span>
+<mat-slider>
+  <input #slidey matSliderThumb>
+</mat-slider>
 {{slidey.value}}
 
 <h1>Colors</h1>
-<mat-slider color="primary" value="50" thumbLabel aria-label="Primary color slider"></mat-slider>
-<mat-slider color="accent" value="50" thumbLabel aria-label="Accent color slider"></mat-slider>
-<mat-slider color="warn" value="50" thumbLabel aria-label="Warn color slider"></mat-slider>
+<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" tickInterval="5" #slider2 aria-label="Min & max slider">
+<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 [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
+<mat-slider disabled [step]="1">
+  <input [(ngModel)]="disabledValue" matSliderThumb>
 </mat-slider>
 <input [(ngModel)]="disabledValue" type="number">
 
 <h1>Slider with set value</h1>
-<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
+<mat-slider>
+  <input value="43" matSliderThumb>
+</mat-slider>
 
 <h1>Slider with step defined</h1>
-<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></mat-slider>
+<mat-slider min="1" max="100" step="20">
+  <input #slider5 matSliderThumb>
+</mat-slider>
 {{slider5.value}}
 
 <h1>Slider with set tick interval</h1>
-<mat-slider tickInterval="auto" aria-label="Slider with auto ticks"></mat-slider>
-<mat-slider tickInterval="9" aria-label="Slider with ticks"></mat-slider>
+<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 thumbLabel aria-label="Slider with thumb label"></mat-slider>
+<mat-slider discrete>
+  <input matSliderThumb>
+</mat-slider>
 
 <h1>Slider with one-way binding</h1>
-<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
+<mat-slider step="10">
+  <input [value]="val" matSliderThumb>
+</mat-slider>
 <input [(ngModel)]="val" type="number">
 
 <h1>Slider with two-way binding</h1>
-<mat-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></mat-slider>
+<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 #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
+<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" value="3" aria-label="Slider in a tab"></mat-slider>
+    <mat-slider min="1" max="5">
+      <input value="3" matSliderThumb>
+    </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>

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

@@ -12,6 +12,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'mdc-slider-demo',
   templateUrl: 'mdc-slider-demo.html',
+  styles: ['.mat-mdc-slider { width: 300px; }'],
 })
 export class MdcSliderDemo {
   demo: number;

src/dev-app/theme.scss

@@ -32,8 +32,6 @@ $candy-app-theme: mat.define-light-theme((
 @include experimental.all-mdc-component-themes($candy-app-theme);
 @include experimental.column-resize-theme($candy-app-theme);
 @include experimental.popover-edit-theme($candy-app-theme);
-// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
-@include mdc-slider-theme.theme($candy-app-theme);
 
 .demo-strong-focus {
   // Include base styles for strong focus indicators.

src/e2e-app/mdc-slider/mdc-slider-e2e.ts

@@ -10,7 +10,20 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'mdc-slider-e2e',
-  template: `<mat-slider></mat-slider>`,
+  template: `
+    <mat-slider id="standard-slider">
+      <input aria-label="Standard slider" matSliderThumb>
+    </mat-slider>
+
+    <mat-slider id="disabled-slider" disabled>
+      <input aria-label="Disabled slider" matSliderThumb>
+    </mat-slider>
+
+    <mat-slider id="range-slider">
+      <input aria-label="Range slider start thumb" matSliderStartThumb>
+      <input aria-label="Range slider end thumb" matSliderEndThumb>
+    </mat-slider>
+    `,
 })
 export class MdcSliderE2e {
 }

src/material-experimental/mdc-helpers/BUILD.bazel

@@ -23,6 +23,7 @@ npm_sass_library(
         "@npm//@material/list",
         "@npm//@material/menu-surface",
         "@npm//@material/radio",
+        "@npm//@material/slider",
         "@npm//@material/snackbar",
         "@npm//@material/switch",
         "@npm//@material/tab",

src/material-experimental/mdc-slider/BUILD.bazel

@@ -17,7 +17,10 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    assets = [":slider_scss"] + glob(["**/*.html"]),
+    assets = [
+        ":slider_scss",
+        ":slider_thumb_scss",
+    ] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-slider",
     deps = [
         "//src/cdk/bidi",
@@ -35,6 +38,7 @@ sass_library(
     deps = [
         "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -50,6 +54,11 @@ sass_binary(
     ],
 )
 
+sass_binary(
+    name = "slider_thumb_scss",
+    src = "slider-thumb.scss",
+)
+
 ###########
 # Testing
 ###########
@@ -66,8 +75,11 @@ ng_test_library(
         "//src/cdk/keycodes",
         "//src/cdk/platform",
         "//src/cdk/testing/private",
+        "//src/material/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
+        "@npm//@material/slider",
+        "@npm//rxjs",
     ],
 )
 
@@ -84,7 +96,9 @@ ng_e2e_test_library(
     name = "e2e_test_sources",
     srcs = glob(["**/*.e2e.spec.ts"]),
     deps = [
+        ":mdc-slider",
         "//src/cdk/testing/private/e2e",
+        "@npm//@material/slider",
     ],
 )
 

src/material-experimental/mdc-slider/_slider-theme.scss

@@ -1,24 +1,46 @@
-// TODO: disabled until we implement the new MDC slider.
-// @use '@material/slider' as mdc-slider;
+@use 'sass:map';
+
+@use '@material/slider/slider' as mdc-slider;
+@use '@material/slider/slider-theme';
+@use '@material/theme/variables' as theme-variables;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
+@use '../../material/core/ripple/ripple-theme';
 @use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    // TODO: disabled until we implement the new MDC slider.
-    // @include mdc-slider-core-styles($query: $mat-theme-styles-query);
+    @include mdc-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-slider {
+      &.mat-primary, &.mat-accent, &.mat-warn {
+        $is-dark: map-get($config, is-dark);
+        $indicator-color: if($is-dark, white, black);
+        $indicator-text-color: if($is-dark, black, white);
+        $indicator-opacity: if($is-dark, 0.9, 0.6);
+
+        @include slider-theme.value-indicator-color(
+          $color: $indicator-color,
+          $opacity: $indicator-opacity,
+          $query: mdc-helpers.$mat-theme-styles-query
+        );
+        @include slider-theme.value-indicator-text-color(
+          $color: $indicator-text-color,
+          $query: mdc-helpers.$mat-theme-styles-query
+        );
+      }
+
       &.mat-primary {
-        // TODO: disabled until we implement the new MDC slider.
-        // @include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
+        @include _custom-slider-color(primary, on-primary);
+      }
+
+      &.mat-accent {
+        @include _custom-slider-color(secondary, on-secondary);
       }
 
       &.mat-warn {
-        // TODO: disabled until we implement the new MDC slider.
-        // @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
+        @include _custom-slider-color(error, on-error);
       }
     }
   }
@@ -28,8 +50,7 @@
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    // TODO: disabled until we implement the new MDC slider.
-    // @include mdc-slider-core-styles($query: $mat-typography-styles-query);
+    @include mdc-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
@@ -54,3 +75,52 @@
   }
 }
 
+@mixin _custom-slider-color($color, $on-color) {
+  @include slider-theme.thumb-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: mdc-helpers.$mat-theme-styles-query
+  );
+  @include slider-theme.track-active-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: mdc-helpers.$mat-theme-styles-query
+  );
+  @include slider-theme.track-inactive-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: mdc-helpers.$mat-theme-styles-query
+  );
+  @include slider-theme.tick-mark-active-color(
+    $color-or-map: (
+      default: $on-color,
+      disabled: surface,
+    ),
+    $query: mdc-helpers.$mat-theme-styles-query
+  );
+  @include slider-theme.tick-mark-inactive-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: mdc-helpers.$mat-theme-styles-query
+  );
+  $ripple-color: map.get(theme-variables.$property-values, $color);
+  @include ripple-theme.color((
+    foreground: (
+      base: $ripple-color
+    ),
+  ));
+  .mat-mdc-slider-hover-ripple {
+    background-color: rgba($ripple-color, 0.05);
+  }
+  .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
+    background-color: rgba($ripple-color, 0.2);
+  }
+}