Hammer.js Slide Function not working with my toggle

Question

Not sure what I'm doing wrong with the hammer.js slide functionality. I want to just put a simple slide gesture so the user can slide the button on mobile. Would appreciate any insight to my errors I really need some help, I stink at JS!

Here is my js fiddle: https://jsfiddle.net/gabbymarley/7qo0ksab/3/

    <label class="toggle-label toggler" id="toggle">
      <input id="rdb1" type="checkbox" name="toggler" checked="true"/><span class='back'>
        <span class='toggle'></span>
        <span class='label on'>Option One</span>  
        <span class='label off'>Option Two</span>
        </span>
    </label>
    
    <div id="blk-1" class="toHide">
       Content One
    </div>
    
    <div id="blk-2" class="toHide" style="display:none">
       Content Two
    </div>


 $("[name=toggler]").click(function() {
  $('.toHide').hide();
  var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
 $("#" + toShow).toggle(1);
});


 Hammer(on).on("swipeleft", function() {
        $(this).find(".toggle").animate({left: "-=100"}, 500);
        $("#event").text("swipe left");
    });
    
    Hammer(off).on("swiperight", function() {
        $(this).find(".toggle").animate({left: "+=100"}, 500);
        $("#event").text("swipe right");
    });
    
});