feat: replace mat-input with 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,32 +1,37 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <mat-form-field
+  <div
     appearance="outline"
     class="w-100"
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
   >
-    <mat-label i18n>Threshold Min</mat-label>
+    <label i18n>Threshold Min</label>
-    <input
+    <mat-slider
-      matInput
       name="thresholdMin"
-      type="number"
+      [max]="data.rule.configuration.threshold.max"
-      [(ngModel)]="data.settings.thresholdMin"
+      [min]="data.rule.configuration.threshold.min"
-    />
+      [step]="data.rule.configuration.threshold.step"
-  </mat-form-field>
+    >
-  <mat-form-field
+      <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+    </mat-slider>
+    <mat-label>{{ data.settings.thresholdMin }}</mat-label>
+  </div>
+  <div
     appearance="outline"
     class="w-100"
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
   >
     <mat-label i18n>Threshold Max</mat-label>
-    <input
+    <mat-slider
-      matInput
       name="thresholdMax"
-      type="number"
+      [max]="data.rule.configuration.threshold.max"
-      [(ngModel)]="data.settings.thresholdMax"
+      [min]="data.rule.configuration.threshold.min"
-    />
+      [step]="data.rule.configuration.threshold.step"
-  </mat-form-field>
+      ><input matSliderThumb [(ngModel)]="data.settings.thresholdMax"
+    /></mat-slider>
+    <mat-label>{{ data.settings.thresholdMax }}</mat-label>
+  </div>
 </div>
 
 <div align="end" mat-dialog-actions>