Elastic Gooey Toggle Switch Web Component – jellySwitch

Category: Form , Javascript | February 12, 2019
Author: akhil0001
Views Total: 202
Official Page: Go to website
Last Update: February 12, 2019
License: MIT

Preview:

Elastic Gooey Toggle Switch Web Component – jellySwitch

Description:

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

See also:

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

You Might Be Interested In:


Leave a Reply