Swiper.js with Rangeslider.js - Conflicting Swipe Events

[patrickjameslim]

Rangeslider.js - http://andreruffert.github.io/rangeslider.js/

Rangeslider.js is having a conflict with Swiper.js. As I slide the slider, the touch event for swiper also triggers. Both of them are sliding at the same time. Also, when I try swiping the sliders on the 2nd slide and above, it is snapping to the leftmost part of the rangeSlider and I can't swipe it anymore. Any possible fix for this?

Here's my code:

-HTML-

<div class="swiper-container">

       <div class="swiper-slide"> 
           <input type="range" class="rangeslider"/>
       </div>

       <div class="swiper-slide">
          <input type="range" class="rangeslider"/>
       </div>

       <div class="swiper-slide"> 
           <input type="range" class="rangeslider"/>
       </div>
    </div>
</div>

-Swiper-

         var mySwiper = $('.swiper-container').swiper({
              mode:'horizontal',
              loop: false
         });

-RangeSlider-

        $('input[type="range"]').rangeslider({polyfill: false,
         min: 1,
         max: 60,
         onSlide: function(position, value){

         }
         onSlideEnd: function(position, value){

         }

});

[nolimits4web]

You can try to add such JS:

$('.rangeslider').on('touchmove mousemove', function(e) {
  e.stopPropagation();
})