@material-git/all/slide-toggle/slide-toggle.html

Angular 2 Material

<label class="md-slide-toggle-label">

  <div class="md-slide-toggle-container">
    <div class="md-slide-toggle-bar"></div>

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

      <div class="md-slide-toggle-thumb">
        <div class="md-ink-ripple"></div>
      </div>
    </div>

    <input #input class="md-slide-toggle-input md-visually-hidden" type="checkbox"
           [id]="getInputId()"
           [required]="required"
           [tabIndex]="tabIndex"
           [checked]="checked"
           [disabled]="disabled"
           [attr.name]="name"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           (blur)="_onInputBlur()"
           (focus)="_onInputFocus()"
           (change)="_onChangeEvent($event)"
           (click)="_onInputClick($event)">
  </div>
  <span class="md-slide-toggle-content">
    <ng-content></ng-content>
  </span>
</label>