Перетащите конфликт между OwlCarousel и RangeSlider

Question

Используя два плагина вместе, OwlCarousel2 а также ionRangeSlider Ползунок диапазона находится внутри карусели, теперь, когда вы хотите изменить диапазон, вы видите, как оба перетаскиваются вместе, я хочу, чтобы диапазон изменения, сова карусель перестала тянуть. Я пишу некоторый код, чтобы предотвратить это, но он немного глючит, один момент работает, один момент трясет один момент, перетаскивая карусель...

Моя логика в том, onChange событие ползунка диапазона, измените опцию карусели совы, чтобы установить mouseDrag ложный.

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  nav: false,
  dots: false,
  mouseDrag: true,
  touchDrag: true,
});

$("#range_01").ionRangeSlider({
  min: 0,
  max: 20,
  onChange: function(data) {
    var owl = $('.owl-carousel');
    var carousel = owl.data('owl.carousel');
    carousel.settings.mouseDrag = false;
    carousel.options.mouseDrag = false;
    owl.trigger('refresh.owl.carousel');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <input id="range_01" class="irs-hidden-input" tabindex="-1" readonly="" type="hidden">
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
</div>

Итак, я пытался до сих пор. Любая идея, чтобы это исправить?