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

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

    <nb-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-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
        </label>
      </div>
    </nb-tab>

    <nb-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 data-toggle="buttons"
           class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
        </label>
        <label ngbButtonLabel class="btn btn-icon">
          <input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
        </label>
      </div>
    </nb-tab>
  </nb-tabset>
</nb-card>