mixitup не работает с диапазоном цен

Question

Я работаю над плагином mixitup с jRange-слайдером jRange и работает хорошо без слайдера jRange, но когда я включаю jrange-слайдер для мобильных телефонов, цена не фильтруется и не отображает продукт в пределах диапазона.Как отфильтровать несколько селекторов.Например, когда вы нажимаете на товары для iPhone, они показывают все товары для iPhone, но я также хочу показать товары для iPhone в ценовом диапазоне.или любые другие продукты.

как решить проблему.

jQuery(document).ready(function($) {

            var price_mega = {};
            
            main_filter();

            $('.slider-input').jRange({
                from: 0,
                to: 400,
                format: '$%s',
                showLabels: true,
                isRange : true,
                onstatechange: function(value){
                    result = value.split(',');
                    price_mega = result;
                    main_filter();
                }
            });

            function main_filter(){

                $('.container').each(function(index, el) {
                    
   var min_price = Number(price_mega[0]);
   var max_price = Number(price_mega[1]);
                    // console.log(min_price);
   var active = $(this).data('active');
   var wrap = $(this).closest('.main-wrapper');
   var target = wrap.find('.target_filter');
   var filter = wrap.find('.controls .filter');
   
   // var filter = wrap.find('.container').find('.target_filter').filter(function(){
    // var price = Number($(this).attr('data-price'));
    // return price >= min_price && price <= max_price
// });
   
   wrap.find('.container').mixItUp({
          selectors: {
              target: target,
              filter: filter
          },
          load: {
              filter: active,
          }
      });
  });
                
}

});

.controls {
    padding: 1rem;
    background: #333;
    font-size: 0.1px;
}
.controls button{
    font-size: 27px;
    color: gray;
    margin-left: 20px;
}
.mixitup-control-active {
    background: #393939;
}
.mixitup-control-active[data-filter]:after {
    background: transparent;
}
.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}
.mix {
    background: #fff;
    border-top: .5rem solid currentColor;
    border-radius: 2px;
    margin-bottom: 1rem;
    position: relative;
    display: none;
}
.mix.green {
    color: #91e6c7;
}
.mix.pink {
    color: #d595aa;
}
.mix.blue {
    color: #5ecdde;
}
.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
@media screen and (min-width: 541px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
}
@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}
@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script>
<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/>




<div class="main-wrapper">
    <div class="controls">
      <button type="button"  data-filter="all" class="filter">All</button>
      <button type="button"  data-filter=".samsung" class="filter">Samsung</button>
      <button type="button"  data-filter=".iphone" class="filter">Iphone</button>
      <button type="button"  data-filter=".blackberry" class="filter">Blackberry</button>


  <div style="margin-top: 5%;height: 22px;">
     <input type="hidden" class="filter slider-input" value="0,400" />
   </div>
</div>

<div class="container" data-active=".samsung">
    <div class="target_filter mix samsung" data-price="200">samsung 1(price $200)</div>
       <div class="target_filter mix blackberry" data-price="111">blackberry 1(price $111)</div>
       <div class="target_filter mix samsung" data-price="165">samsung 2(price $165)</div>
       <div class="target_filter mix iphone" data-price="300">iphone 1(price $300)</div>
       <div class="target_filter mix iphone" data-price="340">iphone 2 (price $340)</div>
       <div class="target_filter mix samsung" data-price="100">samsung 3 (price $100)</div>
       <div class="target_filter mix blackberry" data-price="89">blackberry 2(price $89)</div>
       <div class="target_filter mix iphone" data-price="232">iphone 3(price $232)</div>

        <div class="gap"></div>
        <div class="gap"></div>
        <div class="gap"></div>
     </div>
</div>