AStoker/app.html

## app.html
<template>
  <require from="./switch"></require>
  <span>${toggleState}</span><br />
  <label for="toggle">Toggle: </label>
  <switch id="toggle" value.bind="toggleState" />
</template>

## app.js
export class App {
  toggleState = false;
  toggle(){
    this.toggleState = !this.toggleState;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## switch.css
switch .switch-container{

    position: relative;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 1px #e5e5e5;
    height: 20px;
    width: 35px;
    background-color: white;
    padding: 0;
    cursor: pointer;

    transition: background-color .1s ease-in-out;
}
switch .switch-container.on{
    background-color: #00b300;
    box-shadow: 0px 0px 0px 1px #00b300;
}
switch .switch-container:focus{
    outline: none;
}
switch .indicator{
    box-sizing: content-box;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    margin: 0 -1px;
    background-color: white;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.28);

    transition: left .1s ease-in-out, border-color .1s ease-in-out;
}
switch .switch-container.on .indicator{
  left: calc(100% - 18px);
  border-color: #00b300;
}

## switch.html
<template>
    <require from="./switch.css"></require>
    <button click.trigger="toggle()" class="switch-container ${state}">
        <div class="indicator"></div>
    </button>
</template>

## switch.js
import {bindable, bindingMode, computedFrom} from 'aurelia-framework';

export class SwitchCustomElement{
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value;

    toggle(){
        this.value = !!!this.value; //Double ! forces boolean, third ! toggles state
    }

    @computedFrom('value')
    get state(){
        if(this.value){
            return 'on';
        } else {
            return 'off';
        }
    }
}
	<template>
	<require from="./switch"></require>
	<span>${toggleState}</span><br />
	<label for="toggle">Toggle: </label>
	<switch id="toggle" value.bind="toggleState" />
	</template>
	export class App {
	toggleState = false;
	toggle(){
	this.toggleState = !this.toggleState;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	switch .switch-container{

	position: relative;
	border: none;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 1px #e5e5e5;
	height: 20px;
	width: 35px;
	background-color: white;
	padding: 0;
	cursor: pointer;

	transition: background-color .1s ease-in-out;
	}
	switch .switch-container.on{
	background-color: #00b300;
	box-shadow: 0px 0px 0px 1px #00b300;
	}
	switch .switch-container:focus{
	outline: none;
	}
	switch .indicator{
	box-sizing: content-box;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 18px;
	margin: 0 -1px;
	background-color: white;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.28);

	transition: left .1s ease-in-out, border-color .1s ease-in-out;
	}
	switch .switch-container.on .indicator{
	left: calc(100% - 18px);
	border-color: #00b300;
	}
	<template>
	<require from="./switch.css"></require>
	<button click.trigger="toggle()" class="switch-container ${state}">
	<div class="indicator"></div>
	</button>
	</template>
	import {bindable, bindingMode, computedFrom} from 'aurelia-framework';

	export class SwitchCustomElement{
	@bindable({ defaultBindingMode: bindingMode.twoWay }) value;

	toggle(){
	this.value = !!!this.value; //Double ! forces boolean, third ! toggles state
	}

	@computedFrom('value')
	get state(){
	if(this.value){
	return 'on';
	} else {
	return 'off';
	}
	}
	}