JSFiddle - React, Tailwind, and code Playground

by billyonecan

HTML

<input type="checkbox" checked />

CSS

.sweck-slider {
    width: 48px;
    height: 48px;
    background: #f0f0f0;
    border: solid #b8b8b8 1px;
}

JavaScript

(function( $ ) {
    
    $.fn.sweckr = function( o ) {
      
        var options = $.extend( {}, $.fn.sweckr.defaults, o );
        
        this.each( function() {
               
            var $checkbox = $( this ).hide().addClass('sweck-check'),
                $slider = $( '<div>', { 'class': 'sweck-slider' } ),
                $container = $( '<div>', { 'class': 'sweck-container' } )
                    .insertBefore( this )
                    .append( $checkbox, $slider );
            
            var sliderDimensions = {
                width: $slider.outerWidth( true ),
                height: $slider.outerHeight( true )
            };
            
            var containerStyles = {
                display: 'inline-block',
                position: 'relative',
                width: sliderDimensions.width,
                height: sliderDimensions.height - 2,
                backgroundColor: 'green',
                borderRight: sliderDimensions.width + 'px solid red'
            };
            
            var sliderStyles = {
                position: 'absolute',
                marginTop: '-1px',
                transition: '0.3s',
                left: ( this.checked ) ? sliderDimensions.width : 0
            };
            
            $container.css( containerStyles );
            $slider.css( sliderStyles );                                    
            
        } );
        
    };
    
    $.fn.sweckr.default = {};
    
    var $document = $( document );
        
    if ( $document.data( 'sweckrAttached' ) !== true ) {       
        
        $document.on( 'click', '.sweck-container', function() {
                        
            var $this = $( this ),
                $slider = $this.find( '.sweck-slider' ),
                $checkbox = $this.find( '.sweck-check' );
            
            $checkbox.prop( 'checked', ! $checkbox.prop( 'checked' ) );
            $slider.css( 'left', ( $checkbox.prop( 'checked' ) ) ? $slider.outerWidth(...