fix(slider): Min and max values + improvements (#2073)

- Allow custom ranged `min` and `max` values
- Add `valueChange(value: number)` event emitter
- Adds `tabIndex` property
- Mark as touched on `blur` event
- Improved slider examples

closes #2019

Author: trimox

demos/src/app/app-routing.module.ts

@@ -64,7 +64,7 @@ const routes: Routes = [
   {path: 'ripple-demo', loadChildren: () => import('./components/ripple-demo/ripple.module').then(m => m.RippleModule)},
   {path: 'select-demo', loadChildren: () => import('./components/select/module').then(m => m.SelectModule)},
   {path: 'shape-docs', loadChildren: () => import('./components/shape/module').then(m => m.ShapeModule)},
-  {path: 'slider-demo', loadChildren: () => import('./components/slider-demo/slider.module').then(m => m.SliderModule)},
+  {path: 'slider-demo', loadChildren: () => import('./components/slider/module').then(m => m.SliderModule)},
   {
     path: 'snackbar-demo', loadChildren: () =>
       import('./components/snackbar-demo/snackbar.module').then(m => m.SnackbarModule)

demos/src/app/components/slider-demo/routing.module.ts

@@ -45,6 +45,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>disabled: boolean</td>
         <td>Disables the slider.</td>
       </tr>
+      <tr>
+        <td>tabIndex: number</td>
+        <td>Set the underlying tab index of the component. (Default is 0)</td>
+      </tr>
     </tbody>
   </table>
 
@@ -82,6 +86,12 @@ <h4 mdcSubtitle2>Events</h4>
           when a user is dragging the slider or
           changing the value using the arrow keys.</td>
       </tr>
+      <tr>
+        <td>
+          valueChange(value: number)
+        </td>
+        <td>Emits when the value of the slider changes.</td>
+      </tr>
     </tbody>
   </table>
 </div>

demos/src/app/components/slider-demo/slider.module.ts

@@ -1,23 +1,17 @@
-<div class="demo-content">
-  <mdc-slider #simple discrete [min]="min" [max]="max" [value]="value"></mdc-slider>
-  <p>Min: {{ simple.min }}</p>
-  <p>Max: {{ simple.max }}</p>
-  <p>Value: {{ simple.value }}</p>
-  <example-viewer [example]="exampleSimple"></example-viewer>
-</div>
-
 <div class="demo-content">
   <h3 class="demo-content__headline">Continuous</h3>
-  <mdc-slider #continuous [min]="continuousMin.value" [max]="continuousMax.value"
-    value="50" (input)="onInput($event)" (change)="onChange($event)" name="test"></mdc-slider>
+  <mdc-slider #continuous [min]="continuousMin.value"
+    [max]="continuousMax.value" value="50" (input)="onInput($event)"
+    (change)="onChange($event)" name="test"></mdc-slider>
 
-  <mdc-text-field #continuousMin label="Min" size="1" min="0" max="200" type="number"
-    value="0"></mdc-text-field>
-  <mdc-text-field #continuousMax label="Max" type="number" size="1" min="0" max="200"
-    value="100"></mdc-text-field>
+  <mdc-text-field #continuousMin label="Min" size="1" min="0" max="200"
+    type="number" value="0"></mdc-text-field>
+  <mdc-text-field #continuousMax label="Max" type="number" size="1" min="0"
+    max="200" value="100"></mdc-text-field>
   <div class="demo-layout__row">
     <mdc-form-field>
-      <mdc-checkbox (change)="continuous.disabled = !continuous.disabled"></mdc-checkbox>
+      <mdc-checkbox (change)="continuous.disabled = !continuous.disabled">
+      </mdc-checkbox>
       <label>Disabled</label>
     </mdc-form-field>
   </div>
@@ -29,16 +23,19 @@ <h3 class="demo-content__headline">Continuous</h3>
 
 <div class="demo-content">
   <h3 class="demo-content__headline">Discrete</h3>
-  <mdc-slider #discrete discrete [min]="discreteMin.value" [max]="discreteMax.value"
-    value="25" (input)="discreteInputEventValue = $event.value" (change)="discreteChangeEventValue = $event.value"></mdc-slider>
+  <mdc-slider #discrete discrete [min]="discreteMin.value"
+    [max]="discreteMax.value" [value]="discreteValue"
+    (input)="discreteInputEventValue = $event.value"
+    (change)="discreteChangeEventValue = $event.value"></mdc-slider>
 
-  <mdc-text-field #discreteMin label="Min" type="number" size="1" min="0" max="200"
-    value="0"></mdc-text-field>
-  <mdc-text-field #discreteMax label="Max" type="number" size="1" min="0" max="200"
-    value="100"></mdc-text-field>
+  <mdc-text-field #discreteMin label="Min" type="number" size="1" min="0"
+    max="200" value="0"></mdc-text-field>
+  <mdc-text-field #discreteMax label="Max" type="number" size="1" min="0"
+    max="200" value="100"></mdc-text-field>
   <div class="demo-layout__row">
     <mdc-form-field>
-      <mdc-checkbox (change)="discrete.disabled = !discrete.disabled"></mdc-checkbox>
+      <mdc-checkbox (change)="discrete.disabled = !discrete.disabled">
+      </mdc-checkbox>
       <label>Disabled</label>
     </mdc-form-field>
   </div>
@@ -50,8 +47,9 @@ <h3 class="demo-content__headline">Discrete</h3>
 
 <div class="demo-content">
   <h3 class="demo-content__headline">Discrete with Tick Marks</h3>
-  <mdc-slider #demomarkers discrete markers [min]="dmMin.value" [max]="dmMax.value"
-    [step]="dmStep.value" value="20" (input)="markersInputEventValue = $event.value"
+  <mdc-slider #demomarkers discrete markers [min]="dmMin.value"
+    [max]="dmMax.value" [step]="dmStep.value" value="20"
+    (input)="markersInputEventValue = $event.value"
     (change)="markersChangeEventValue = $event.value"></mdc-slider>
   <mdc-text-field #dmMin label="Min" type="number" size="1" min="0" max="200"
     value="0"></mdc-text-field>
@@ -61,7 +59,8 @@ <h3 class="demo-content__headline">Discrete with Tick Marks</h3>
     value="5"></mdc-text-field>
   <div class="demo-layout__row">
     <mdc-form-field>
-      <mdc-checkbox (change)="demomarkers.disabled = !demomarkers.disabled"></mdc-checkbox>
+      <mdc-checkbox (change)="demomarkers.disabled = !demomarkers.disabled">
+      </mdc-checkbox>
       <label>Disabled</label>
     </mdc-form-field>
   </div>
@@ -71,15 +70,26 @@ <h3 class="demo-content__headline">Discrete with Tick Marks</h3>
   <example-viewer [example]="exampleDiscreteTickMarks"></example-viewer>
 </div>
 
+<div class="demo-content">
+  <h3 class="demo-content__headline">Custom range</h3>
+  <mdc-slider #ranged discrete min="500" max="1000" value="500"></mdc-slider>
+  <p>Min: {{ ranged.min }}</p>
+  <p>Max: {{ ranged.max }}</p>
+  <p>Value: {{ ranged.value }}</p>
+  <example-viewer [example]="exampleCustomRange"></example-viewer>
+</div>
+
 <div class="demo-content">
   <h3 class="demo-content__headline">ngModel</h3>
-  <mdc-slider #demoModel [min]="0" [max]="100" [(ngModel)]="sliderModel"></mdc-slider>
+  <mdc-slider #demoModel [min]="0" [max]="100" [(ngModel)]="sliderModel">
+  </mdc-slider>
   <p>Value: {{ demoModel.value }}</p>
   <example-viewer [example]="exampleNgModel"></example-viewer>
 </div>
 
 <div class="demo-content">
   <h3 class="demo-content__headline">Theme</h3>
-  <mdc-slider discrete markers class="demo-slider--custom" value="20"></mdc-slider>
+  <mdc-slider discrete markers class="demo-slider-custom" value="20">
+  </mdc-slider>
   <example-viewer [example]="exampleTheme"></example-viewer>
 </div>

demos/src/app/components/slider-demo/api.html renamed to demos/src/app/components/slider/api.html

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {RoutingModule, ROUTE_DECLARATIONS} from './routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RoutingModule
+  ],
+  declarations: [ROUTE_DECLARATIONS]
+})
+export class SliderModule {}

demos/src/app/components/slider-demo/examples.html renamed to demos/src/app/components/slider/examples.html

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, Slider} from './slider';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  Slider
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: Slider,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/slider/module.ts

@@ -5,7 +5,7 @@ import {ComponentViewer} from '../../shared/component-viewer';
 import {MdcSliderChange} from '@angular-mdc/web';
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class SliderDemo implements OnInit {
+export class Slider implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -38,6 +38,8 @@ export class Examples {
   min: number = 10;
   value: number = 25;
 
+  discreteValue = 50;
+
   sliderModel: number = 10;
 
   continuousInputEventValue: number;
@@ -61,7 +63,7 @@ export class Examples {
   // Examples
   //
 
-  exampleEvents = `import { MdcSliderChange } from '@angular-mdc/web';
+  exampleEvents = `import {MdcSliderChange} from '@angular-mdc/web';
 
 onInput(event: MdcSliderChange): void {
   console.log(event.value);
@@ -71,13 +73,6 @@ onChange(event: MdcSliderChange): void {
   console.log(event.value);
 }`;
 
-  exampleSimple = {
-    html: `<mdc-slider discrete [min]="min" [max]="max" [value]="value"></mdc-slider>`,
-    ts: `max: number = 50;
-min: number = 10;
-value: number = 25;`
-  };
-
   exampleContinuous = {
     html: `<mdc-slider [min]="0" [max]="100" value="50"
   (input)="onInput($event)" (change)="onChange($event)"></mdc-slider>`,
@@ -96,13 +91,17 @@ value: number = 25;`
     ts: this.exampleEvents
   };
 
+  exampleCustomRange = {
+    html: `<mdc-slider #ranged discrete min="500" max="1000" value="500"></mdc-slider>`
+  };
+
   exampleNgModel = {
     html: `<mdc-slider [min]="0" [max]="100" [(ngModel)]="sliderModel"></mdc-slider>`,
     ts: `sliderModel: number = 10;`
   };
 
   exampleTheme = {
-    html: `<mdc-slider discrete markers class="demo-slider--custom" value="20"></mdc-slider>`,
+    html: `<mdc-slider discrete markers class="demo-slider-custom" value="20"></mdc-slider>`,
     sass: `https://raw.githubusercontent.com/trimox/angular-mdc-web/master/demos/src/styles/_slider.scss`
   };
 }

demos/src/app/components/slider/routing.module.ts

@@ -1,10 +1,10 @@
 @use '@material/slider/_index' as slider;
 @use '@material/theme/color-palette' as material-color;
 
-.demo-slider--custom {
+.demo-slider-custom {
   @include slider.highlight-color(material-color.$red-700);
   @include slider.rail-color(material-color.$yellow-600, 1);
-  @include slider.rail-tick-mark-color(white);
+  @include slider.rail-tick-mark-color(blue);
   @include slider.thumb-color(material-color.$orange-500);
   @include slider.focus-halo-color(material-color.$yellow-900);
   @include slider.value-pin-fill-color-accessible(material-color.$pink-500);