test(material/slider): improve slider demo (#25995)

Author: wagnermaciel

src/dev-app/slider/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
     ],
     deps = [
         "//src/material/button-toggle",
+        "//src/material/checkbox",
         "//src/material/slider",
         "//src/material/tabs",
         "@npm//@angular/forms",

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

@@ -1,13 +1,14 @@
-<h1>Color Picker</h1>
+<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>
-
-<mat-tab-group color="{{colorModel}}">
+<mat-tab-group [color]="colorModel">
   <mat-tab label="Reactive form controls">
     <table class="demo-data-table">
       <tr>
@@ -34,12 +35,10 @@ <h1>Color Picker</h1>
     </table>
 
     <input class="demo-native-slider" type="range" [formControl]="control" #nativeSlider1 />
-    <br>
-    <mat-slider discrete showTickMarks color="{{colorModel}}">
+    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
       <input matSliderThumb [formControl]="control" #ngThumb1 />
     </mat-slider>
-    <br>
-    <mat-slider discrete showTickMarks color="{{colorModel}}">
+    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
       <input matSliderStartThumb [formControl]="control" #ngStartThumb1 />
       <input matSliderEndThumb #ngEndThumb1 />
     </mat-slider>
@@ -91,15 +90,11 @@ <h1>Color Picker</h1>
       </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 showTickMarks color="{{colorModel}}" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
+    <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 showTickMarks color="{{colorModel}}" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
+    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
       <input matSliderStartThumb #ngStartThumb2 [(ngModel)]="valueModel" />
       <input matSliderEndThumb #ngEndThumb2 />
     </mat-slider>
@@ -152,12 +147,10 @@ <h1>Color Picker</h1>
     </table>
 
     <input class="demo-native-slider" type="range" #nativeSlider3 [value]="value" [min]="min" [max]="max" [step]="step" [disabled]="disabled" />
-    <br>
-    <mat-slider discrete showTickMarks color="{{colorModel}}" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
+    <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 showTickMarks color="{{colorModel}}" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
+    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
       <input matSliderStartThumb #ngStartThumb3 [value]="value" />
       <input matSliderEndThumb #ngEndThumb3 />
     </mat-slider>
@@ -179,11 +172,10 @@ <h1>Color Picker</h1>
       </tr>
     </table>
 
-      <mat-slider discrete showTickMarks color="{{colorModel}}">
+      <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
         <input matSliderThumb #ngThumb4 [(value)]="twoWayValue" />
       </mat-slider>
-      <br>
-      <mat-slider discrete showTickMarks color="{{colorModel}}">
+      <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
         <input matSliderStartThumb #ngStartThumb4 [(value)]="twoWayValue" />
         <input matSliderEndThumb #ngEndThumb4 />
       </mat-slider>

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

@@ -44,4 +44,5 @@
   border: 1px solid;
   border-radius: 5px;
   min-width: 300px;
+  margin-top: 30px;
 }

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

@@ -11,13 +11,15 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
   selector: 'slider-demo',
   templateUrl: 'slider-demo.html',
   standalone: true,
   imports: [
     FormsModule,
+    MatCheckboxModule,
     MatButtonToggleModule,
     MatSliderModule,
     MatTabsModule,
@@ -26,22 +28,24 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
   styleUrls: ['slider-demo.css'],
 })
 export class SliderDemo {
-  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');