New Twiddle

components.x-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  init() {
    this._super(...arguments);
    this.uniqueId = Ember.guidFor(this);
  }
});

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%;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{x-toggle checked=checked onChange=(action (mut checked))}}
{{x-toggle checked=checked onChange=(action (mut checked)) color="red"}}
{{x-toggle checked=checked onChange=(action (mut checked)) color="blue"}}
<br>
<br>
<br>
{{x-toggle checked=checked onChange=(action (mut checked)) size="big"}}
{{x-toggle checked=checked onChange=(action (mut checked)) color="red" size="big"}}
{{x-toggle checked=checked onChange=(action (mut checked)) color="blue" size="big"}}
<br>
<br>
<br>
<br>

{{x-toggle checked=checked onChange=(action (mut checked)) label="Enable notifications" labelColor="green"}}

<br>
<br>
<br>
{{x-toggle checked=checked onChange=(action (mut checked)) size="big" label="Enable notifications"}}

<br>
<br>
<br>

{{x-toggle checked=checked onChange=(action (mut checked)) offLabelColor="red" offLabel="Disable notifications" onLabel="Enable notifications" onLabelColor="green"}}

templates.components.x-toggle.hbs

{{#if offLabel}}
  <label class="x-toggle-label {{size}} {{offLabelColor}}"
    role="button"
    onclick={{action onChange false}}>
    {{offLabel}}
  </label>
{{/if}}

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

{{#if label}}
  <label for="input-{{uniqueId}}" class="x-toggle-label {{size}} {{labelColor}}">{{label}}</label>
{{/if}}

{{#if onLabel}}
  <label class="x-toggle-label {{size}} {{onLabelColor}}"
    role="button"
    onclick={{action onChange true}}>
    {{onLabel}}
  </label>
{{/if}}

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