Lo hizo casi todo https://chat.openai.com/ ya solo lo adapte a que fuera programable el tamaño y color
<style>
:root {
  --toggleAncho: 250px;/*puede ser px o rem o em*/
  --toggleAlto:  100px;
  --toggleMargen: 5px;/*el margen entre la bola y el toggler*/
  --toggleColor: #336699 ; /*el color cuando esta ON*/
  --toggleRedondo: 20px; /*aqui haces que sea redondo, achatado o cuadrado segun el alto*/
}
/* Pasar ancho a jquery*/
.pasarAncho{
    width: var(--toggleAncho);        
}
/* toggle switch container */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: var(--toggleAncho);
  height: var(--toggleAlto);
  background-color: #ccc;
  border-radius: var(--toggleRedondo);/*que sea redondo*/
  cursor: pointer;
}

/* toggle switch handle */
.handle {
  position: absolute;
  top: var(--toggleMargen);
  left: var(--toggleMargen);
  width: calc( (var(--toggleAncho) / 2) - (var(--toggleMargen) * 2)  );
  height: calc( var(--toggleAlto) - (var(--toggleMargen) * 2)  );
  background-color: white;
  border-radius: var(--toggleRedondo);/*que sea redodno*/
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.4);
  transition: left 0.1s ease-in-out;
}

/* checked state */
#myCheckbox:checked + .toggle-switch .handle {
  left: calc( var(--toggleAncho) - (var(--toggleMargen) * 2) );
}
#myCheckbox:checked + .toggle-switch  {
  background-color: var(--toggleColor);
}

/* hover state */
.toggle-switch:hover {
  background-color: #aaa;
}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>jQuery(document).ready(function ($) { 
    
    //escoge el checkbox a remplazar por un toggle switch
    let checkbox = '#myCheckbox';
    // hide the checkbox
    $(checkbox).hide();
        
    // sacar el ancho del css
    $(checkbox).after("<div class='pasarAncho'>no sirve pa nada, solo pasar el alto desde CSS</div>");
    let anchoMitad = $(".pasarAncho").css("width");
    //console.log("",anchoMitad);
    anchoMitad = anchoMitad.replaceAll("px","").replaceAll(" ","");
    //console.log("",anchoMitad);
    anchoMitad = anchoMitad/2;
    //console.log("",anchoMitad);
    $(".pasarAncho").remove();
  
  // create a new toggle switch container
  var $toggleSwitch = $('<div>');
  $toggleSwitch.addClass('toggle-switch');
  
  // create a new toggle switch handle
  var $handle = $('<div>');
  $handle.addClass('handle');
  
  // attach click event handler to toggle switch container
  $toggleSwitch.click(function() {
    // toggle checked state of checkbox
    $(checkbox).prop('checked', !$(checkbox).prop('checked'));
    
    // move handle to correct position
    if ($(checkbox).prop('checked')) {
      $handle.animate({left: '+='+anchoMitad}, 100);
        //$toggleSwitch.css("background-color","#336699"); //con Elementor puedes requerir mejor que cambie el color con jquery
    } else {
      $handle.animate({left: '-='+anchoMitad}, 100);
    }
  });
  
  // insert handle into toggle switch container
  $toggleSwitch.append($handle);
  
  // que vea si esta activo o no
  $(checkbox).after($toggleSwitch);
        setInterval(function(){
        console.log( checkbox, $(checkbox).is(":checked") );
    }, 500);

});    
</script>
<br /><br /><br />
<input type="checkbox" id="myCheckbox">