Feature/implement range slider in rule settings dialog (#4043)

* Implement range slider in rule settings dialog

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Moved the chart of the holdings tab on the home page from experimental to general availability
 - Extended the assistant by a holding selector
 - Separated the _FIRE_ / _X-ray_ page
+- Improved the usability to customize the rule thresholds in the _X-ray_ page by introducing range sliders (experimental)
 - Improved the language localization for Italian (`it`)
 - Upgraded `ngx-skeleton-loader` from version `7.0.0` to `9.0.0`
 - Upgraded `uuid` from version `9.0.1` to `11.0.2`

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

@@ -1,6 +1,51 @@
 <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">
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold range</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>
+      <div class="align-items-center d-flex w-100">
+        @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
+          class="flex-grow-1"
+          [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>
+    </div>
+  } @else {
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
@@ -13,6 +58,7 @@
           {{ data.settings.thresholdMin }}
         }
       </h6>
+      <div class="align-items-center d-flex w-100">
         @if (data.rule.configuration.threshold.unit === '%') {
           <label>{{
             data.rule.configuration.threshold.min | percent: '1.2-2'
@@ -21,6 +67,7 @@
           <label>{{ data.rule.configuration.threshold.min }}</label>
         }
         <mat-slider
+          class="flex-grow-1"
           name="thresholdMin"
           [max]="data.rule.configuration.threshold.max"
           [min]="data.rule.configuration.threshold.min"
@@ -36,6 +83,7 @@
           <label>{{ data.rule.configuration.threshold.max }}</label>
         }
       </div>
+    </div>
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
@@ -48,6 +96,7 @@
           {{ data.settings.thresholdMax }}
         }
       </h6>
+      <div class="align-items-center d-flex w-100">
         @if (data.rule.configuration.threshold.unit === '%') {
           <label>{{
             data.rule.configuration.threshold.min | percent: '1.2-2'
@@ -56,6 +105,7 @@
           <label>{{ data.rule.configuration.threshold.min }}</label>
         }
         <mat-slider
+          class="flex-grow-1"
           name="thresholdMax"
           [max]="data.rule.configuration.threshold.max"
           [min]="data.rule.configuration.threshold.min"
@@ -71,6 +121,8 @@
           <label>{{ data.rule.configuration.threshold.max }}</label>
         }
       </div>
+    </div>
+  }
 </div>
 
 <div align="end" mat-dialog-actions>

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

@@ -1,2 +1,5 @@
 :host {
+  label {
+    margin-bottom: 0;
+  }
 }