JSFiddle - React, Tailwind, and code Playground

by seboulba

HTML

<script src="https://rawgithub.com/sebastien-roch/iToggle/master/itoggle.jquery.js"></script>
<form action="#">
  <label for="foo-toggle-long">No attribute label given, take default options:</label>
  <input id="foo-toggle-long" name="foo-long" type="checkbox" class="iToggle" checked/>
  <br />
  <br />
  <label for="foo-toggle">Regular yes/no:</label>
  <input id="foo-toggle" name="foo" type="checkbox" class="iToggle" data-label-on="yes" data-label-off="no"/>
  <br />
  <br />
  <label for="foo-toggle-long">With long label:</label>
  <input id="foo-toggle-long" name="foo-long" type="checkbox" class="iToggle" data-label-on="I'm a quite long label" data-label-off="I'm short" checked/>
</form>

CSS

/*****************************/
/* iToggle */
/*****************************/

.iToggle,
.iToggle * {
    box-sizing: border-box;
}

.iToggle {
    display: inline-block;
    border: 1px solid #AAA;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: text-bottom;
}

.iToggle.focus {
    outline: none;
    border-color: #549ED4;
    box-shadow: 0 0 5px #549ED4;
}

.iToggle span.label {
    display: inline-block;
    padding: 3px 5px;
    text-align: center;
    color: white;
}

.iToggle .slider {
    border: 1px solid #CCC;
    background-color: rgb(238,238,238); /* fallback */
    background-image: linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
    background-image: -o-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
    background-image: -moz-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
    background-image: -webkit-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
    background-image: -ms-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.03, rgb(199,199,199)),
        color-stop(1, rgb(245,245,245)),
        color-stop(0.95, rgb(255,255,255))
    );
}

.iToggle .label-off {
    background: #FF0000;
}

.iToggle .label-on {
    background: #00DD00;
}

JavaScript

$(document).ready(function() {
    // default options
    $.fn.iToggle.defaultOptions = {
      defaultOffLabel: 'not at all',
        defaultOnLabel: 'maybe'
    };
    
    $('input[type=checkbox]').iToggle();
});