fixup! feat(material/slider): improve slider demo

Author: wagnermaciel

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

@@ -1,15 +1,14 @@
-<mat-checkbox [color]="colorModel" [(ngModel)]="discrete">Discrete</mat-checkbox>
-<br>
-<mat-checkbox [color]="colorModel" [(ngModel)]="showTickMarks">Show tick marks</mat-checkbox>
-<br>
-<mat-button-toggle-group [(ngModel)]="colorModel" aria-label="Slider color options">
-  <mat-button-toggle value="primary">Primary</mat-button-toggle>
-  <mat-button-toggle value="accent">Accent</mat-button-toggle>
-  <mat-button-toggle value="warn">Warn</mat-button-toggle>
-</mat-button-toggle-group>
-<br>
-<br>
-<br>
+<div class="demo-global-controls-container">
+  <mat-checkbox [color]="colorModel" [(ngModel)]="discrete">Discrete</mat-checkbox>
+  <br>
+  <mat-checkbox [color]="colorModel" [(ngModel)]="showTickMarks">Show tick marks</mat-checkbox>
+  <br>
+  <mat-button-toggle-group [(ngModel)]="colorModel" aria-label="Slider color options">
+    <mat-button-toggle value="primary">Primary</mat-button-toggle>
+    <mat-button-toggle value="accent">Accent</mat-button-toggle>
+    <mat-button-toggle value="warn">Warn</mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
 
 <mat-tab-group [color]="colorModel">
   <mat-tab label="Reactive form controls">
@@ -38,11 +37,9 @@
     </table>
 
     <input class="demo-native-slider" type="range" [formControl]="control" #nativeSlider1 />
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
       <input matSliderThumb [formControl]="control" #ngThumb1 />
     </mat-slider>
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
       <input matSliderStartThumb [formControl]="control" #ngStartThumb1 />
       <input matSliderEndThumb #ngEndThumb1 />
@@ -95,14 +92,10 @@
       </tr>
     </table>
 
-    <br>
-    
     <input class="demo-native-slider" type="range" #nativeSlider2 [(ngModel)]="valueModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel" />
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
       <input matSliderThumb #ngThumb2 [(ngModel)]="valueModel" />
     </mat-slider>
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
       <input matSliderStartThumb #ngStartThumb2 [(ngModel)]="valueModel" />
       <input matSliderEndThumb #ngEndThumb2 />
@@ -156,11 +149,9 @@
     </table>
 
     <input class="demo-native-slider" type="range" #nativeSlider3 [value]="value" [min]="min" [max]="max" [step]="step" [disabled]="disabled" />
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
       <input matSliderThumb #ngThumb3 [value]="value" />
     </mat-slider>
-    <br>
     <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
       <input matSliderStartThumb #ngStartThumb3 [value]="value" />
       <input matSliderEndThumb #ngEndThumb3 />
@@ -186,7 +177,6 @@
       <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
         <input matSliderThumb #ngThumb4 [(value)]="twoWayValue" />
       </mat-slider>
-      <br>
       <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
         <input matSliderStartThumb #ngStartThumb4 [(value)]="twoWayValue" />
         <input matSliderEndThumb #ngEndThumb4 />

src/dev-app/slider/slider-demo.scss

@@ -1,3 +1,7 @@
+.demo-global-controls-container {
+  padding-bottom: 30px;
+}
+
 .demo-data-table {
   font-family: arial, sans-serif;
   border-collapse: collapse;

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

@@ -28,24 +28,24 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   styleUrls: ['slider-demo.css'],
 })
 export class SliderDemo {
-  discrete: boolean = true;
-  showTickMarks: boolean = true;
-  colorModel: string = 'primary';
+  discrete = true;
+  showTickMarks = true;
+  colorModel = 'primary';
 
   noop = () => {};
-  min: string = '0';
-  max: string = '100';
-  step: string = '0';
-  value: string = '0';
-  disabled: boolean = false;
+  min = '0';
+  max = '100';
+  step = '0';
+  value = '0';
+  disabled = false;
 
-  twoWayValue: number = 0;
+  twoWayValue = 0;
 
-  minModel: number = 0;
-  maxModel: number = 100;
-  valueModel: number = 0;
-  stepModel: number = 0;
-  disabledModel: boolean = false;
+  minModel = 0;
+  maxModel = 100;
+  valueModel = 0;
+  stepModel = 0;
+  disabledModel = false;
 
   control = new FormControl('0');