ngx-admin/src/app/pages/dashboard/temperature/temperature.component.html

<nga-card size="large">
  <nga-tabset fullWidth>

    <nga-tab tabTitle="Temperature">

      <div class="slider-container">
        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
                                 [min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
                                 [fillColors]="colors.temperature">

          <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
            <div class="value temperature">
              {{ temperatureOff ? '--' : (temperature | ngxRound) }}
            </div>
            <div class="desc">
              Celsius
            </div>
          </div>
        </ngx-temperature-dragger>
      </div>

      <div [(ngModel)]="temperatureMode" ngbRadioGroup data-toggle="buttons"
           class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
        <label class="btn btn-icon">
          <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="warm"/><i class="ion-ios-sunny-outline"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
        </label>
      </div>
    </nga-tab>

    <nga-tab tabTitle="Humidity">

      <div class="slider-container">
        <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
                                 [min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
                                 [fillColors]="colors.temperature">

          <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">
            <div class="value humidity">
              {{ humidityOff ? '--' : (humidity | ngxRound) }}
            </div>
          </div>
        </ngx-temperature-dragger>
      </div>

      <div [(ngModel)]="humidityMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
           data-toggle="buttons">
        <label class="btn btn-icon">
          <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="warm"/><i class="ion-ios-sunny-outline"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
        </label>
        <label class="btn btn-icon">
          <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
        </label>
      </div>
    </nga-tab>
  </nga-tabset>
</nga-card>