<toggle-button>

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  airplaneMode: false,
  wifi: true,
  bluetooth: true,
  
  actions: {
    setAirplaneMode(value) {
      if (value) {
        this.setProperties({
          airplaneMode: true,
          wifi: false,
          bluetooth: false
        });
      } else {
        this.set('airplaneMode', false);
      }
    },

    setWifi(value) {
      this.set('wifi', value);
    },
    
    setBluetooth(value) {
      this.set('bluetooth', value);
    }
  }
});

application.template.hbs

<h1>Settings</h1>

<dl class="settings">

  <dt>Airplane Mode</dt>
  <dd><toggle-button active={{airplaneMode}} onChange={{action 'setAirplaneMode'}} /></dd>

  <dt>Wi-Fi</dt>
  <dd><toggle-button active={{wifi}} onChange={{action 'setWifi'}} /></dd>

  <dt class="{{if airplaneMode 'disabled'}}">Bluetooth</dt>
  <dd><toggle-button active={{bluetooth}} disabled={{airplaneMode}} onChange={{action 'setBluetooth'}} /></dd>

</dl>

styles.app.css

body {
  margin: 12px 24px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  background: #fafafa;
}

dl.settings {
  border: 1px solid  #dedede;
  border-radius: 5px;
  background: #ffffff;
}

dl.settings dt {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 5px 25px;
  width: 100%;
  height: 51px;
  line-height: 40px;
  border-bottom: 1px solid #dedede;
}

dl.settings dt:last-of-type {
  border-bottom: none;
}

dl.settings dt.disabled {
  opacity: 0.3;
}

dl.settings dd {
  position: relative;
  top: -51px;
  box-sizing: border-box;
  margin: 0;
  padding: 0px 25px;
  width: 100%;
  height: 0;
  text-align: right;
}

toggle-button {
  position: relative;
  top: 12px;
  display: inline-block;
  width: 60px;
  height: 25px;
  border: 2px solid #dedede;
  border-radius: 15px;
  background: #fafafa;
  cursor: pointer;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

toggle-button .switch {
  position: absolute;
  top: 0px;
  left: -36px;
  bottom: 0px;
  width: 95px;
  transition: left 0.25s;
}

toggle-button .label {
  position: absolute;
  top: 0px;
  display: block;
  padding: 0px 12px;
  width: 23.5px;
  height: 25px;
  line-height: 26px;
  font-size: 12px;
}

toggle-button .label.on {
  left: 0;
  text-align: left;
  background: #66ee66;
  color: #ffffff;
}

toggle-button .label.off {
  right: 0;
  text-align: right;
  color: #dedede;
}

toggle-button .toggle {
  position: absolute;
  top: -1px;
  left: 50%;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0px 0px 0px -13px;
  border: 1px solid #dedede;
  border-radius: 15px;
  background: #ffffff;
}

toggle-button[aria-pressed=true] .switch {
  left: 0px;
}

toggle-button[aria-disabled=true] {
  opacity: 0.3;
  cursor: default;
}

toggle-button.component.js

import Ember from 'ember';

export default Ember.GlimmerComponent.extend({
  click() {
    let { disabled, onChange, active } = this.attrs;
    
    if (!disabled && onChange) {
      onChange(!active);
    }
  }
});

toggle-button.template.hbs

<toggle-button role="button" aria-pressed="{{attrs.active}}" aria-disabled="{{attrs.disabled}}">
  <div class="switch">
    <span class="label on">On</span>
    <hr class="toggle">
    <span class="label off">Off</span>
  </div>
</toggle-button>

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "hax": "https://cdn.rawgit.com/chancancode/5b7b95b6268d51cdcaae/raw/92e0654083305c73cd601381a6cea705be9f8890/hax.js",
    "ember": "http://builds.emberjs.com/canary/ember.debug.js",
    "ember-template-compiler": "http://builds.emberjs.com/canary/ember-template-compiler.js"
  }
}