Toggle web component button demo

The loader contains nine props; you can change and try:

px
px
unchecked

How To Use

<link rel="import" href="https://s3-us-west-2.amazonaws.com/wc-toogle/wc-toggle-btn.html"> <wc-toggle-btn on-text="yes" off-text="no" on-text-color="#fff" off-text-color="#fff" height="34px" width="90px" on-bg-color="#41b883" off-bg-color="#ccc" slider-color="#fff" ontoggle="toggle(event)"> </wc-toggle-btn>

toggle callback

const toggle = (event) => { document.getElementById('toggle-val').innerHTML = event.detail.isChecked ? 'checked' : 'unchecked'; }; Or document.getElementsByTagName('wc-toggle-btn')[0].addEventListener('toggle', function (event) { console.log(event.detail.isChecked); });

polyfill link

<script src="/profileportfolio/polyfills/webcomponentsjs/webcomponents-loader.js"></script>