Elastic Gooey Toggle Switch Web Component – jellySwitch

Preview:

Description:

The jellySwitch is a pretty nice, iOS-style toggle switch web component implemented in vanilla JavaScript.

See also:

• 10 Best Toggle Switch JavaScript And CSS Libraries

How to use it:

Install & Download.

# NPM
$ npm install jelly-switch --save

Import the component.

import { JellySwitch } from "jelly-switch"

Or directly load the JavaScript from a CDN.

<script src ="//unpkg.com/jelly-switch"></script>

The HTML structure.

<jelly-switch id="example" name="switch">
  <p slot="content-right" id="rightContent">On/Off</p>
</jelly-switch>
<jelly-switch id="example" name="switch">
  <p slot="content-left" id="rightContent">On/Off</p>
</jelly-switch>

Perform actions when the state is changed.

<jelly-switch id="example" name="switch" onToggle="return captureTheChangeEvent(this,event)">
  <p slot="content-right" id="rightContent">On/Off</p>
</jelly-switch>

function captureTheChangeEvent(self,event) {
  if(self.checked)
  {
    document.getElementById('rightContent').style.color = 'green';
  }
  else
  {
    document.getElementById('rightContent').style.color = 'red';
  }
}