twentywenty-handle cannot be selected in IE when part of swiper slide

I was unable to create a codepen to demonstrate this issue (too many dependencies to sort out) so hopefully the description will be enough.

I successfully combined swiper.js with twentytwenty for a project. In all modern browsers, including Microsoft Edge, both pieces work together.

<div class="swiper-container horizontal-slider">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
            <div class="swiper-slide" data-hash="slide1">
                <div class="twentytwenty-container"><img src="./img/projects/slide1_before.jpg" />
                <img src="./img/projects/slide1.jpg" /></div>
            <div class="swiper-slide" data-hash="slide2"><img src="./img/projects/slide2.jpg" /></div>
            <div class="swiper-slide" data-hash="slide3"><img src="./img/projects/slide3.jpg" /></div>
            <div class="swiper-slide" data-hash="slide4"><img src="./img/projects/slide4.jpg" /></div>
            <div class="swiper-slide" data-hash="slide5">
                <div class="twentytwenty-container"><img src="./img/projects/slide5_before.jpg" />
                <img src="./img/projects/slide5.jpg" /></div>
            <div class="swiper-slide" data-hash="slide6"><img src="./img/projects/4English-slide6.jpg" /></div>
            <div class="swiper-slide" data-hash="slide7"><img src="./img/projects/slide7.jpg" /></div>
    <!-- If we need pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>

This is all with jQuery 3.2.1.

    mainSwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        loop: true,
        spaceBetween: 10,
        slidesPerView: 'auto',
        loopedSlides: 5,
        autoplay: {
            delay: 2500,

        keyboard: {
            enabled: true,
        hashNavigation: {
            watchState: true,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',


    default_offset_pct: 0.1, // How much of the before image is visible when the page loads
    before_label: '', // Set a custom before label
    after_label: '', // Set a custom after label
    no_overlay: true, //Do not show the overlay with before and after
    //click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.

And with some jQuery to disable moving from slide to slide when selecting the "handle" you don't get a parallax effect (there are more parts for things like touch devices but that doesn't apply here).

$(".twentytwenty-handle").mousedown(function() {
    if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
    mainSwiper.allowTouchMove = false;
}).mouseup(function() {
    if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
    mainSwiper.allowTouchMove = true;

I thought things were all set. And went to move on to testing when I discovered that the jquery.event.move script that twentytwenty needs has polyfill requirements for IE. Once those were sorted out everything loaded in IE. But when I clicked on the handle, nothing happened in regard to twentytwenty. The whole slide moved, and adding console.log inside the events showed they weren't triggering. I re-enabled the click_to_move option in twentytwenty and that works for moving the handle around. But that's obviously suboptimal.

Does anyone have any thoughts? Would you like more info? Should I be filing bug reports? Thanks!