Superlight Vanilla Javascript Plugin For Sliding Toggle Switches | LC-switch

Superlight Pure javascript form switch form plugin by LCweb, gives a fresh look to your applications, leveraging javascript events and general functions.

LC Switch is a small jQuery and Vanilla JS plugin that converts default checkbox and radio inputs into pretty switches or toggle buttons, with smooth sliding effects supported by CSS3 transitions.

List of most important features:

  • Single 7 KB file, no dependencies, ES6 100% JavaScript
  • Minimal integration efforts in the present forms
  • General functions to manage the case of each domain
  • Linking via a selector or DOM object (yes also jQuery objects)
  • Complete event tracking
  • Support custom texts
  • Optional compact mode
  • Optional custom active color (gradients support)

How to make use of it:

1. Import the jQuery library and the jQuery LC Switch plugin’s information into your undertaking.

<script src="jquery.min.js"></script>
<script src="lc_switch.js"></script>
<link rel="stylesheet" href="lc_switch.css" />

2. Call the plugin on the checkbox & radio inputs and achieved. The plugin will deal with the remaining.

$('input').lc_switch();

3. Public capabilities.

// toggle on
$('input').lcs_on();

// toggle off
$('input').lcs_off();

// destroy
$('input').lcs_destroy();

4. Events.

// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});

// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});

JavaScript Plugin For Sliding Toggle Switches, LCweb Plugin/Github, toggle switch js, jquery toggle switch, switcher on off jquery


See Demo And Download

Official Website(LCweb-ita): Click Here

This superior jQuery/javascript plugin is developed by LCweb-ita. For extra Advanced Usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

swiper-touch-slider

Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

Leave a Reply

Your email address will not be published. Required fields are marked *