feat/adding-mat-slider

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSliderModule } from '@angular/material/slider';
 
 import { IRuleSettingsDialogParams } from './interfaces/interfaces';
 
@@ -21,7 +22,8 @@ import { IRuleSettingsDialogParams } from './interfaces/interfaces';
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    MatSliderModule,
   ],
   selector: 'gf-rule-settings-dialog',
   standalone: true,

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -1,35 +1,40 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <mat-form-field
+  
-    appearance="outline"
+    <div
     class="w-100"
-    [ngClass]="{ 'd-none': settings.thresholdMin === undefined }"
+    [ngClass]="{ 'd-none': settings.thresholdMin === undefined }">
-  >
+    <label i18n>Threshold Min</label>
-    <mat-label i18n>Threshold Min</mat-label>
+    <mat-slider
-    <input
-      matInput
-      name="thresholdMin"
-      type="number"
       [(ngModel)]="settings.thresholdMin"
-    />
+      [min]="data.rule.configuration.min"
-  </mat-form-field>
+      [max]="data.rule.configuration.max"
-  <mat-form-field
+      [step]="data.rule.configuration.step"
-    appearance="outline"
+      thumbLabel
+      tickInterval="auto"
+      class="w-100"
+      ></mat-slider>
+</div>
+    
+    <div
     class="w-100"
-    [ngClass]="{ 'd-none': settings.thresholdMax === undefined }"
+    [ngClass]="{ 'd-none': settings.thresholdMax === undefined }">
-  >
+    <label i18n>Threshold Max</label>
-    <mat-label i18n>Threshold Max</mat-label>
+    <mat-slider
-    <input
-      matInput
-      name="thresholdMax"
-      type="number"
       [(ngModel)]="settings.thresholdMax"
-    />
+      [min]="data.rule.configuration.min"
-  </mat-form-field>
+      [max]="data.rule.configuration.max"
+      [step]="data.rule.configuration.step"
+      thumbLabel
+      tickInterval="auto"
+      class="w-100"
+  ></mat-slider>
+</div>
+
 </div>
 
-<div align="end" mat-dialog-actions>
+<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end">
   <button i18n mat-button (click)="dialogRef.close()">Close</button>
   <button color="primary" mat-flat-button (click)="dialogRef.close(settings)">
     <ng-container i18n>Save</ng-container>