Implement range slider in rule settings dialog

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

@@ -1,6 +1,55 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
+  @if (
+    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
+  ) {
+    <div
+      class="w-100"
+      [ngClass]="{
+        'd-none':
+          !data.rule.configuration.thresholdMin ||
+          !data.rule.configuration.thresholdMax
+      }"
+    >
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMin }}
+        }
+        -
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMax }}
+        }
+      </h6>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.min | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.min }}</label>
+      }
+      <mat-slider
+        [max]="data.rule.configuration.threshold.max"
+        [min]="data.rule.configuration.threshold.min"
+        [step]="data.rule.configuration.threshold.step"
+      >
+        <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
+        <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+      </mat-slider>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.max | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.max }}</label>
+      }
+    </div>
+  } @else {
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
@@ -71,6 +120,7 @@
         <label>{{ data.rule.configuration.threshold.max }}</label>
       }
     </div>
+  }
 </div>
 
 <div align="end" mat-dialog-actions>