JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ssSwitch"></div>

JavaScript

console.clear();
(function($){
  $.fn.slideSwitch = function (options) {
    var settings = $.extend({
      defaultSide: "left",
      backgroundColor: "red",
      toggleSize: 30,
      toggleColor: "white",
      speed: 100
    }, options );
    return this.each(function() {
      $this = $(this);
      var gap = Math.round(settings.toggleSize * 0.03);
      if (gap < 1) {gap = 1}
      $this.css({
        width: (settings.toggleSize * 2) + "px",
        backgroundColor: settings.backgroundColor,
        borderRadius: settings.toggleSize + "px",
        overflow: "hidden",
        padding: gap + "px"
      })
      var marginLeft = 0;
      if (settings.defaultSide == "right") {
        marginLeft = settings.toggleSize;
      }
      var toggle = $("<div>").addClass("ssToggle").css({
        width: settings.toggleSize,
        height: settings.toggleSize,
        borderRadius: settings.toggleSize,
        backgroundColor: settings.toggleColor,
        //float: settings.defaultSide,
        marginLeft: marginLeft

      });
      $this.html(toggle);
      $this.click(function() {
        var tggl = $(this).find(".ssToggle");
        console.log("margin-left:", tggl.css("margin-left"));
        if (parseInt(tggl.css("margin-left")) == 0) {
          console.log("moving to the right");
          tggl.animate({ "margin-left": settings.toggleSize + "px" }, settings.speed);
          if (settings.defaultSide == "right") { $(this).trigger("switchedOn"); }
        } else {
          console.log("moving to the left");
          tggl.animate({ "margin-left": 0 }, settings.speed);
          if (settings.defaultSide == "left") { $(this).trigger("switchedOn"); }
        }
        $(this).trigger("switched");
      })
    });
};
}(jQuery));

$(function() {

  $(".ssSwitch").slideSwitch({
    toggleSize: 30,
    speend: 40,
    defaultSide: "right"
  }).on("switchedOn", function(e) {
  	console.log("switched on!");
  });
  
});