  <div fxLayout="row" fxLayoutGap="30px" style="padding: 3rem 3rem 0">
    <button mat-stroked-button routerLink="./centralized-security-management">Centralized Security Management</button>
    <button mat-stroked-button routerLink="./security-system-details">Security System Details </button>
  </div>

  <div class="sound-group">
    <h2>WHISTLE TIME: {{timeEffect1}}s</h2>
    <div class="volume-group">
      <app-slider-range  [value]="timeEffect1" (valueChange)="timeEffect1 = $event" ></app-slider-range>
    </div>
  </div>
  <div class="sound-group">
    <h2>24-HOUR ZONE ALARM TIME: {{timeEffect2}}s</h2>
    <div class="volume-group">
      <app-slider-range  [value]="timeEffect2" (valueChange)="timeEffect2 = $event" ></app-slider-range>
    </div>
  </div>


