New Twiddle

application.template.hbs

<h1>Toggle Button Demo</h1>

<p>On: <toggle-button active={{true}} /></p>

<p>Off: <toggle-button active={{false}} /></p>

<p>Disabled: <toggle-button disabled={{true}} /></p>

styles.app.css

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

toggle-button {
  position: relative;
  top: 9px;
  display: inline-block;
  width: 60px;
  height: 25px;
  border: 2px solid #dedede;
  border-radius: 15px;
  background: #fafafa;
  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;
}

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"
  }
}