<eh-toggle> Demo

Default Toggles

<eh-toggle></eh-toggle>
<eh-toggle checked></eh-toggle>
<eh-toggle disabled></eh-toggle>
          

Unchecked: Checked:

Disabled, unchecked: Disabled, checked:

Rounded Toggles

<eh-toggle rounded></eh-toggle>
          

Unchecked: Checked:

Disabled, unchecked: Disabled, checked:

Style Colors

--button-color: 205 205 205;
--checked-background-color: 255 64 64;
--disabled-background-color: 101 25 25;
--unchecked-background-color: 24 58 153;

Unchecked: Checked: Disabled:

Style Size

--toggle-height: 50px;
--button-size: 30px;
            

Default: Rounded: Disabled:

Change Transition Speed

--toggle-transition-time: 2s;
--toggle-transition-time: 0s;
          

Slow: Fast:

Handle the "change" Event

<eh-toggle rounded id="capturechange" onChange="ToggleChanged()"></eh-toggle>
-- and/or --
document.querySelector('#capturechange').addEventListener('change',
  (e) => { ... }
          

Toggle me:

 

Change the Button Content

--toggle_unchecked-content: "\29B0";
--toggle_checked-content: "\2611";
--toggle_disabled-content: "\2716";