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

<div mat-dialog-title>{{ data.rule.name }}</div>

<div class="py-3" mat-dialog-content>
  <div
    class="w-100"
    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
  >
    <h6 class="mb-0">
      <ng-container i18n>Threshold Min</ng-container>:
      @if (data.rule.configuration.threshold.unit === '%') {
        {{ data.settings.thresholdMin | percent: '1.2-2' }}
      } @else {
        {{ data.settings.thresholdMin }}
      }
    </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
      name="thresholdMin"
      [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>
    @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
    class="w-100"
    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
  >
    <h6 class="mb-0">
      <ng-container i18n>Threshold Max</ng-container>:
      @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
      name="thresholdMax"
      [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>
    @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>

<div align="end" mat-dialog-actions>
  <button i18n mat-button (click)="dialogRef.close()">Close</button>
  <button
    color="primary"
    mat-flat-button
    (click)="dialogRef.close(data.settings)"
  >
    <ng-container i18n>Save</ng-container>
  </button>
</div>