ember-toggle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  hasStyledBytes: false,

  actions: {
    toggleByteStyling(val) {
    	console.log('val', val);
      this.set('hasStyledBytes', val);
    }
  }
});

styles.app.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    color: inherit;
    vertical-align: baseline;
}

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

input {
  line-height: 1.45;
}

.x-toggle-component {
  display: inline-flex;
}
.x-toggle-component label.off-label, .x-toggle-component label.on-label {
  padding: 0;
}
.x-toggle-component label.toggle-text {
  padding-left: 0.5rem;
}
.x-toggle-component .x-toggle-container {
  padding: 0;
}
.x-toggle-component .x-toggle-container.medium, .x-toggle-component .x-toggle-container.medium label > .x-toggle-default {
  padding: 0;
  width: 2rem;
}
.x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default {
  background-color: transparent;
  border: 1px solid #757575;
  border-radius: 10rem;
  flex-basis: 4.5rem;
  height: 16px;
  padding: 0;
  transition: background-color .3s;
}
.x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default::after {
  background-color: #eeeeee;
  border-radius: 10rem;
  width: 1rem;
}
.x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default:hover:not(.x-toggle-disabled) {
  border-color: #cccccc;
}
.x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default:hover:not(.x-toggle-disabled)::after {
  background-color: #eeeeee;
}
.x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default.x-toggle-disabled {
  opacity: 0.2;
}
.x-toggle-component .x-toggle-container-checked .x-toggle:checked + label > .x-toggle-default.x-toggle-btn {
  transition: background-color .3s;
  background-color: #03a9f4;
}
.x-toggle-component .x-toggle-container-checked .x-toggle:checked + label > .x-toggle-default.x-toggle-btn::after {
  left: 14px;
}

templates.application.hbs

{{#x-toggle
  onLabel="Style Bytes"
  onToggle=(action 'toggleByteStyling')
  showLabels=true
  value=(readonly hasStyledBytes) as |toggle|}}
    {{toggle.switch}}
    {{toggle.onLabel
      value=(readonly (not hasStyledBytes))}}
{{/x-toggle}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-toggle": "5.0.0-alpha.4",
    "ember-truth-helpers": "1.3.0"
  }
}