JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<script src="https://github.com/yr4ik/jQuery-OnOff/blob/master/off.png?raw=true"></script>
<input type="checkbox" name="checkbox" class="onOff">

CSS

.jq-onOff {
     position: relative;
     height: 22px;
     display: inline-block;
     *display: inline;
     zoom: 1;
     overflow: hidden;
     cursor: pointer;
 }
 .jq-onOff .On .onOff-right {
     margin-right: -5px;
 }
 .jq-onOff .Off .onOff-left {
     margin-left: -5px;
 }
 .jq-onOff .onOff-left, .jq-onOff .onOff-right {
     white-space: nowrap;
     font-size: 13px;
     line-height: 23px;
     font-weight: bold;
     font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
     padding: 0 5px 0 7px;
 }
 .jq-onOff .onOff-left {
     float:left;
     color: #fff;
     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.600);
     background: url('https://github.com/yr4ik/jQuery-OnOff/blob/master/on.png?raw=true') no-repeat;
 }
 .jq-onOff .onOff-right {
     float:right;
     color: #8b8b8b;
     text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.600);
     background: url('https://github.com/yr4ik/jQuery-OnOff/blob/master/off.png?raw=true') top right no-repeat;
 }
 .jq-onOff .onOff-slide {
     background: url('https://github.com/yr4ik/jQuery-OnOff/blob/master/slider.png?raw=true') no-repeat;
     width: 31px;
     height: 22px;
 }

JavaScript

/*!	* jQuery onOff plugin	*
 *	replace checkbox in iphone style
 *	(c)2013 Polevik Yuriy [email protected]	*
 */

$.fn.onOff = function (opt) {

    var opt = $.extend({
        lefttext: 'ON',
        righttext: 'OFF',
        speed: 300,
        boxClass: 'jq-onOff'
    }, opt);

    function onSlide(pb) {
        pb.css('left', 0);
        pb.removeClass().addClass('On');
    }

    function offSlide(pb, witem) {
        pb.css('left', '-' + (witem - 2) + 'px');
        pb.removeClass().addClass('Off');
    }

    return this.each(function () {
        var checkbox = $(this).hide();
        if (checkbox.is(':checkbox')) {

            var box = $('<div class="' + opt.boxClass + '"></div>').insertAfter(checkbox),
                pb = $('<div/>').appendTo(box).css('position', 'absolute'),
                on = $('<span class="onOff-left">' + opt.lefttext + '</span>').appendTo(pb),
                slide = $('<div class="onOff-slide"></div>').appendTo(pb).css('position', 'absolute'),
                off = $('<span class="onOff-right">' + opt.righttext + '</span>').appendTo(pb),
                witem = Math.max(on.outerWidth(), off.outerWidth()),
                wslide = slide.outerWidth(),
                onw = on.width(),
                offw = off.width(),
                stop = false;

            if (onw > offw) off.width(onw);
            else if (onw < offw) on.width(offw);

            box.width(witem + wslide - 2);
            pb.width(witem * 2 + wslide - 4);

            slide.on('mousedown', function () {
                var pos = 0,
                    xpos = box.offset().left,
                    boxw = box.outerWidth(),
                    move = setTimeout(function () {
                        $(document).on('mousemove.onOff', function (e) {
                            move = false;
                            pos = e.pageX - xpos;
                            pb.css('left', (pos - witem - 2) + 'px');

                            var pos_l =...