ipsos-components/src/lib/slide-toggle/slide-toggle.html

Material Design components for Angular

<label class="mat-slide-toggle-label" #label>

  <div class="mat-slide-toggle-bar"
       [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">

    <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"
           [id]="inputId"
           [required]="required"
           [tabIndex]="tabIndex"
           [checked]="checked"
           [disabled]="disabled"
           [attr.name]="name"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           (change)="_onChangeEvent($event)"
           (click)="_onInputClick($event)">

    <div class="mat-slide-toggle-thumb-container"
         (slidestart)="_onDragStart()"
         (slide)="_onDrag($event)"
         (slideend)="_onDragEnd()">

      <div class="mat-slide-toggle-thumb"></div>

      <div class="mat-slide-toggle-ripple" mat-ripple
           [matRippleTrigger]="label"
           [matRippleDisabled]="disableRipple || disabled"
           [matRippleCentered]="_rippleConfig.centered"
           [matRippleRadius]="_rippleConfig.radius"
           [matRippleSpeedFactor]="_rippleConfig.speedFactor">
      </div>

    </div>


  </div>

  <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">
    <ng-content></ng-content>
  </span>
</label>