<div
  [ngClass]="{
    'range-display--vertical': config.orientation === 'vertical',
    'range-display--compact': display === 'compact',
    'range-display--inline': display === 'inline'
  }"
  attr.data-label="{{ config.unit }}"
>
  <div
    class="range-display"
    #rangeDisplay
  >
    <div class="range-display__range">
      <div class="range-display__range__unit">
        {{ config.unit }}
      </div>
      <div
        *ngIf="isYellowRangeDisplayed()"
        class="range-display__range__min"
      ></div>
      <div
        *ngIf="isRedRangeDisplayed()"
        class="range-display__range__max"
      ></div>
      <div
        *ngIf="checkTarget()"
        class="range-display__range__target"
        attr.data-label="{{ config.target }} {{ config.unit }}"
        title="{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}"
      ></div>
      <div
        [ngStyle]="{
          display:
            config.current != undefined &&
            config.current >= config.min &&
            config.current <= config.max
              ? 'block'
              : 'none'
        }"
        #currentRangeElement
        class="range-display__range__current"
        attr.data-label="{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}"
        title="{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{
          config.time | c8yDate
        }}"
      ></div>
    </div>
    <div class="range-display__ruler">
      <div
        *ngFor="let x of [].constructor(10); let index = index; trackBy: trackByIndex"
        attr.data-label="{{ rulerCalc(index) }}"
        class="range-display__tick"
      ></div>
      <div
        attr.data-label="{{ config.max ?? 100 | number }}"
        class="range-display__tick"
      ></div>
    </div>
  </div>
</div>