feat(material/slider): improve slider demo

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,17 @@
-<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>
 
-<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>
@@ -35,11 +39,11 @@ <h1>Color Picker</h1>
 
     <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>
@@ -95,11 +99,11 @@ <h1>Color Picker</h1>
 
     <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>
@@ -153,11 +157,11 @@ <h1>Color Picker</h1>
 
     <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 +183,11 @@ <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.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,6 +28,8 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
   styleUrls: ['slider-demo.css'],
 })
 export class SliderDemo {
+  discrete: boolean = true;
+  showTickMarks: boolean = true;
   colorModel: string = 'primary';
 
   noop = () => {};