jellySwitch | iOS Style Toggle Switch with Vanilla JavaScript

jellySwitch is a pretty nice and iOS style toggle switch, it allow us create a toggle switch for our web application using vanilla JavaScript.

How to create an iOS style web toggle switch using jellySwitch?

1.Install jelly-switch

# NPM

$ npm install jelly-switch --save

2.Import jelly-switch to your file

import { JellySwitch } from "jelly-switch"

You also can use javascript CND to load.

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

3.Create a toggle switch using jelly-switch

<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>

4.Bind an event for toggle switch

<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'; } }

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