feat(material-experimental/mdc-slider): WIP implement the basics for …

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

@@ -1,53 +1,37 @@
-<h1>Default Slider</h1>
-Label <mat-slider #slidey aria-label="Basic slider"></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>
-
-<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">
+<p>Continuous slider</p>
+<mat-slider ariaLabel="Continuous slider demo">
+	<input [value]="10" matSliderInput>
 </mat-slider>
-{{slider2.value}}
-<input [(ngModel)]="max" type="number">
 
-<h1>Disabled Slider</h1>
-<mat-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
+<p>Ranged slider</p>
+<mat-slider ariaLabel="Continuous ranged slider demo">
+	<input [value]="10" matSliderInput>
+	<input [value]="20" matSliderInput>
 </mat-slider>
-<input [(ngModel)]="disabledValue" type="number">
-
-<h1>Slider with set value</h1>
-<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
-
-<h1>Slider with step defined</h1>
-<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></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>
 
-<h1>Slider with Thumb Label</h1>
-<mat-slider thumbLabel aria-label="Slider with thumb label"></mat-slider>
+<p>Discrete slider</p>
+<mat-slider [isDiscrete]="true" ariaLabel="Discrete slider demo">
+	<input [value]="10" matSliderInput>
+</mat-slider>
 
-<h1>Slider with one-way binding</h1>
-<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
-<input [(ngModel)]="val" type="number">
+<p>Discrete ranged slider</p>
+<mat-slider [isDiscrete]="changingBool" ariaLabel="Discrete ranged slider demo">
+	<input [value]="10" matSliderInput>
+	<input [value]="20" matSliderInput>
+</mat-slider>
 
-<h1>Slider with two-way binding</h1>
-<mat-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></mat-slider>
-<input [(ngModel)]="demo" type="number">
+<p>Discrete slider w/ tick marks</p>
+<mat-slider [isDiscrete]="true" [hasTickMarks]="changingBool" [step]="10" ariaLabel="Discrete slider with tick marks demo">
+	<input [value]="10" matSliderInput>
+</mat-slider>
 
-<h1>Set/lost focus to show thumblabel programmatically</h1>
-<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
-<button (click)="demoSlider.focus()">Focus Slider</button>
-<button (click)="demoSlider.blur()">Blur Slider</button>
+<p>Discrete ranged slider w/ tick marks</p>
+<mat-slider [isDiscrete]="true" [hasTickMarks]="changingBool" [step]="10" ariaLabel="Discrete ranged slider with tick marks demo">
+	<input [value]="10" matSliderInput>
+	<input [value]="20" matSliderInput>
+</mat-slider>
 
-<mat-tab-group>
-  <mat-tab label="One">
-    <mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
-  </mat-tab>
-</mat-tab-group>
+<p>Disabled slider</p>
+<mat-slider [isDisabled]="changingBool" ariaLabel="Disabled slider demo">
+	<input [value]="10" matSliderInput>
+</mat-slider>

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

@@ -14,9 +14,25 @@ import {Component} from '@angular/core';
   templateUrl: 'mdc-slider-demo.html',
 })
 export class MdcSliderDemo {
-  demo: number;
-  val: number = 50;
-  min: number = 0;
-  max: number = 100;
-  disabledValue = 0;
+  changingNum: number = 0;
+  changingBool: boolean = true;
+
+  toggleNumForever(v1: any, v2: any, time: number) {
+    setTimeout(() => {
+      this.changingNum = this.changingNum === v1 ? v2 : v1;
+      this.toggleNumForever(v1, v2, time);
+    }, time);
+  }
+
+  toggleBoolForever(time: number) {
+    setTimeout(() => {
+      this.changingBool = !this.changingBool;
+      this.toggleBoolForever(time);
+    }, time);
+  }
+
+  constructor() {
+    this.toggleNumForever(0, 10, 3000);
+    this.toggleBoolForever(3000)
+  }
 }

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

@@ -10,11 +10,13 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material-experimental/mdc-core';
 import {MatSlider} from './slider';
+import {MatSliderThumb} from './slider-thumb';
+import {MatSliderInput} from './slider-input';
 
 @NgModule({
   imports: [MatCommonModule, CommonModule],
-  exports: [MatSlider, MatCommonModule],
-  declarations: [MatSlider],
+  exports: [MatSlider, MatSliderInput, MatSliderThumb, MatCommonModule],
+  declarations: [MatSlider, MatSliderInput, MatSliderThumb],
 })
 export class MatSliderModule {
 }

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

@@ -7,4 +7,6 @@
  */
 
 export * from './slider';
+export * from './slider-input';
+export * from './slider-thumb';
 export * from './module';

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input, OnInit} from '@angular/core';
+import {Thumb} from '@material/slider';
+import {MatSlider} from './slider';
+
+@Directive({
+	selector: '[matSliderInput]',
+	host: {
+		'class': 'mdc-slider__input',
+		'type': 'range',
+		'[min]': 'min',
+		'[max]': 'max',
+		'[step]': 'step',
+		'[attr.value]': 'value',
+	}
+}) export class MatSliderInput {
+	/** The current value of this slider input. */
+	@Input()
+	get value(): number { return this._value; };
+	set value(v: number) {
+		this._value = v;
+		if (this._slider.initialized) {
+			this._slider.setValue(v, this.thumb);
+		}
+	};
+	private _value: number;
+
+	/** The minimum value that this slider input can have. */
+	get min(): number {
+		if (this._slider.isRange && this.thumb === Thumb.END) {
+			return this._slider.getValue(Thumb.START);
+		}
+		return this._slider.min;
+	};
+
+	/** The maximum value that this slider input can have. */
+	get max(): number {
+		return this.thumb === Thumb.END
+			? this._slider.max
+			: this._slider.getValue(Thumb.END);
+	};
+
+	/** The size of each increment between the values of the slider. */
+	get step(): number { return this._slider.step; }
+
+	/** Indicates which slider thumb this input corresponds to. */
+	get thumb(): Thumb { return this._thumb; }
+	set thumb(v: Thumb) {
+		this._thumb = v;
+		this._cdr.detectChanges();
+	}
+	private _thumb: Thumb;
+
+	constructor(private _el: ElementRef, private _slider: MatSlider, private _cdr: ChangeDetectorRef) {}
+
+	getRootEl(): HTMLInputElement { return this._el.nativeElement; };
+}

src/material-experimental/mdc-slider/slider-thumb.html

@@ -0,0 +1,10 @@
+<ng-container *ngIf="isDiscrete">
+	<div class="mdc-slider__value-indicator-container">
+		<div class="mdc-slider__value-indicator">
+			<span class="mdc-slider__value-indicator-text">
+				{{ valueIndicatorText }}
+			</span>
+		</div>
+	</div>
+</ng-container>
+<div class="mdc-slider__thumb-knob" #knob></div>

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'mat-slider-thumb',
+  templateUrl: 'slider-thumb.html',
+  host: {'class': 'mdc-slider__thumb'},
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatSliderThumb {
+  /** Whether the slider is discrete. */
+  @Input()
+  get isDiscrete(): boolean { return this._isDiscrete; }
+  set isDiscrete(v) { this._isDiscrete = coerceBooleanProperty(v); }
+  private _isDiscrete = false;
+
+  /** The text content of the value indicator for a discrete slider. */
+  @Input()
+  get valueIndicatorText(): string { return this._valueIndicatorText; }
+  set valueIndicatorText(v: string) {
+    this._valueIndicatorText = v;
+    this._cdr.detectChanges();
+  }
+  private _valueIndicatorText: string;
+
+  @ViewChild('knob') private _knob: ElementRef<HTMLElement>;
+  private get knob(): Element { return this._knob.nativeElement; }
+
+  constructor(private _cdr: ChangeDetectorRef, private _elementRef: ElementRef<HTMLElement>) {}
+
+  getRootEl() {
+    return this._elementRef.nativeElement;
+  }
+
+  getKnobWidth() {
+    return this.knob.getBoundingClientRect().width;
+  }
+
+  static ngAcceptInputType_isDiscrete: BooleanInput;
+}

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

@@ -1 +1,12 @@
-<!-- TODO: to be implemented as a part of the new MDC slider -->
+<ng-content></ng-content>
+<div class="mdc-slider__track">
+	<div class="mdc-slider__track--inactive"></div>
+	<div class="mdc-slider__track--active">
+		<div class="mdc-slider__track--active_fill" #trackActive></div>
+	</div>
+	<div *ngIf="hasTickMarks" class="mdc-slider__tick-marks" #tickMarkContainer>
+		<div *ngFor="let tickMark of tickMarks" class="{{getTickMarkClass(tickMark)}}"></div>
+	</div>
+</div>
+<mat-slider-thumb [isDiscrete]="isDiscrete" [valueIndicatorText]="startValueIndicatorText" #startThumb></mat-slider-thumb>
+<mat-slider-thumb *ngIf="isRange" [isDiscrete]="isDiscrete" [valueIndicatorText]="endValueIndicatorText" #endThumb></mat-slider-thumb>

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

@@ -1,59 +1,7 @@
-// TODO: disabled until we implement the new MDC slider.
-// @import '@material/slider/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../cdk/a11y/a11y';
+// @import '@material/slider';
+@import '@material/slider/slider';
+@include core-styles;
 
-$mat-slider-min-size: 128px !default;
-$mat-slider-horizontal-margin: 8px !default;
-
-// TODO: disabled until we implement the new MDC slider.
-// @include mdc-slider-core-styles($query: $mat-base-styles-without-animation-query);
-
-// Overwrites the mdc-slider default styles to match the visual appearance of the
-// Angular Material standard slider. This involves making the slider an inline-block
-// element, aligning it in the vertical middle of a line, specifying a default minimum
-// width and adding horizontal margin.
-.mat-mdc-slider {
-  display: inline-block;
-  box-sizing: border-box;
-  outline: none;
-  vertical-align: middle;
-  margin: {
-    left: $mat-slider-horizontal-margin;
-    right: $mat-slider-horizontal-margin;
-  }
-
-  // Unset the default "width" property from the MDC slider class. We don't want
-  // the slider to automatically expand horizontally for backwards compatibility.
-  width: auto;
-  min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
-
-  @include cdk-high-contrast(active, off) {
-    // The slider track isn't visible in high contrast mode so we work
-    // around it by setting an outline and removing the height to make it look solid.
-    .mdc-slider__track-container {
-      height: 0;
-      outline: solid 2px;
-      margin-top: 1px;
-    }
-
-    // Adds an outline around the thumb label so it doesn't just float on top of the slider.
-    .mdc-slider__pin-value-marker {
-      outline: solid 1px;
-    }
-  }
-}
-
-// In order to make it possible for developers to disable animations for a  slider,
-// we only activate the MDC slider animation styles if animations are enabled.
-.mat-mdc-slider:not(._mat-animation-noopable) {
-  // TODO: disabled until we implement the new MDC slider.
-  // @include mdc-slider-core-styles($query: animation);
-}
-
-// Sliders without a thumb label (aka non-discrete) currently cannot have ticks
-// enabled. This breaks backwards compatibility with the standard Angular Material
-// slider, so we manually ensure that ticks can be rendered.
-.mat-slider-has-ticks:not(.mat-slider-disabled) .mdc-slider__track-marker-container {
-  visibility: visible;
+mat-slider {
+	display: block;
 }