From f9df8017fa6e7631907ef352443ef541575fbfc9 Mon Sep 17 00:00:00 2001
From: vitalymatyushik <vitaly.matyushik@freighthub.com>
Date: Sun, 13 Oct 2024 22:00:27 +0200
Subject: [PATCH] feat: replace mat-input with mat-slider

---
 .../rule-settings-dialog.component.ts         |  4 ++-
 .../rule-settings-dialog.html                 | 35 +++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
index 0dd23ab16..4685aa72d 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
+++ b/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,
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 0c2477b63..435eef7a9 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/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>
-    <input
-      matInput
+    <label i18n>Threshold Min</label>
+    <mat-slider
       name="thresholdMin"
-      type="number"
-      [(ngModel)]="data.settings.thresholdMin"
-    />
-  </mat-form-field>
-  <mat-form-field
+      [max]="data.rule.configuration.threshold.max"
+      [min]="data.rule.configuration.threshold.min"
+      [step]="data.rule.configuration.threshold.step"
+    >
+      <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
-      matInput
+    <mat-slider
       name="thresholdMax"
-      type="number"
-      [(ngModel)]="data.settings.thresholdMax"
-    />
-  </mat-form-field>
+      [max]="data.rule.configuration.threshold.max"
+      [min]="data.rule.configuration.threshold.min"
+      [step]="data.rule.configuration.threshold.step"
+      ><input matSliderThumb [(ngModel)]="data.settings.thresholdMax"
+    /></mat-slider>
+    <mat-label>{{ data.settings.thresholdMax }}</mat-label>
+  </div>
 </div>
 
 <div align="end" mat-dialog-actions>