New Twiddle

components.x-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  init() {
    this._super(...arguments);
    this.uniqId = `input-${Ember.guidFor(this)}`;
  }
});

components.x-toggle.switch-btn.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.x-toggle.switch-label.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  actions: {
    click(e) {
      let value = this.get('value');
      if (typeof value === 'boolean') {
        e.preventDefault();
        return this.get('onChange')(value);
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  checked: false
});

styles.app.css

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

.x-toggle {
  display: inline-block;
  flex-wrap: nowrap;
  height: auto;
  padding: 0 0.35rem;
  width: 4rem;
	font-size: 1.0rem;
}

.x-toggle.big {
  width: 5rem;
}

.x-toggle.big .x-toggle-switch {
  height: 2.5em;
}

.x-toggle.big .x-toggle-switch:after,
.x-toggle.big .x-toggle-switch:before {
  width: 38px;
  height: 38px;
}

.x-toggle-label {
  line-height: 2em;
  vertical-align: bottom;
}

.x-toggle-label.big {
  line-height: 2.5em;
}

.x-toggle-label.green {
  color: #8CC152;
}

.x-toggle-label.red {
  color: #DA4453;
}

.x-toggle-checkbox {
  display: none;
}

.x-toggle-switch {
  user-select: none;
  outline: 0;
  display: flex;
  flex-basis: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  background: #f0f0f0;
  border-radius: 2em;
  transition: all .4s ease;  
}

.x-toggle-switch:after,
.x-toggle-switch:before {
  position: relative;
  display: block;
  content: "";
  width: 30px;
  height: 30px;
}

.x-toggle-switch:after {
  left: 0;
  border-radius: 50%;
  background: #fff;
  transition: all .2s ease;
  border: 1px solid #CCD1D9;
  box-shadow: rgba(0, 0, 0, 0.172549) 0px 1.5px 1px 0px;  
}

.x-toggle-switch:before {
  display: none;
}

.x-toggle-checkbox:checked + .x-toggle-switch {
  background: #8CC152;
}

.x-toggle.red .x-toggle-checkbox:checked + .x-toggle-switch {
  background: #DA4453;
}

.x-toggle.blue .x-toggle-checkbox:checked + .x-toggle-switch {
  background: #5D9CEC;
}

.x-toggle-checkbox:checked + .x-toggle-switch:after {
  left: 50%;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc; 
  padding: 6px;
}

td:nth-child(2n+1) {
  background-color: #fafafa;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{#x-toggle checked=checked onChange=(action (mut checked)) as |t|}}
  {{t.switch}}
  {{#t.label action="toggle"}}Toggle{{/t.label}}
{{/x-toggle}}
<br>
<br>
<br>
<table>
  <tbody>
    <tr>
      {{#x-toggle checked=val onChange=(action (mut val)) as |t|}}
        <td>Notifications</td>
        <td>{{#t.label value=false color="green"}}Disable{{/t.label}}</td>
        <td>{{t.switch color="blue" size="big"}}</td>
        <td>{{#t.label value=true color="red"}}Enable{{/t.label}}</td>
    	{{/x-toggle}}
    </tr>
  </tbody>
</table>
<br>
<br>
{{x-toggle checked=checked onChange=(action (mut checked))}}

templates.components.x-toggle.hbs

{{#if hasBlock}}
  {{yield (hash 
    switch=(component 'x-toggle/switch-btn' checked=checked onChange=onChange uniqId=uniqId)
    label=(component 'x-toggle/switch-label' checked=checked onChange=onChange uniqId=uniqId)
  )}}
{{else}}
 {{x-toggle/switch-btn checked=checked onChange=onChange uniqId=uniqId}}
{{/if}}

templates.components.x-toggle.switch-btn.hbs

<span class="x-toggle {{color}} {{size}}">
  <input type="checkbox" class="x-toggle-checkbox"
    checked={{checked}}
    onchange={{action onChange value="target.checked"}}
    id="{{uniqId}}">
  <label class="x-toggle-switch" for="{{uniqId}}"></label>
</span>

templates.components.x-toggle.switch-label.hbs

<label class="x-toggle-label {{size}} {{color}}"
  for={{uniqId}}
  onclick={{action 'click'}}
  role="button">
  {{yield}}
</label>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}