mixitup not working with price slide range

Question

i working on mixitup plugin with jRange slider jquery plugin and is working good without jRange slider, but when i include jrange slider for mobiles price its not filter and not show product within the range. how to filter multiple selector. for example when click on iphone products , its show all iphone product but i want to also show iphone products with in price range. or any other products.

how to fix the problem.

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>

Answer 1

They provide a demo with range slider.

It consist to add a range filter via the plugin API

// Using the static method `registerFilter` from the MixItUp plugins API, we can
// register the above function as a filter, to manipulate the value returned from the
// `testResultEvaluateHideShow` hook.
mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', pricefilterTestResult);

Then add a function to test your price range before showing results for exemple :

function pricefilterTestResult(show, target) {
    const price = Number(target.dom.el.getAttribute('data-price')); // get object price
    const range = Number(document.querySelector('#filter_price').value); // get range price
    if (price > range) { // compare
      show = false;
    }
    return show;
  }//> pricefilterTestResult

The range listener function

/**
  * Ensures that the mixer is re-filtered whenever the value of a range
  * input changes.
  *
  * @return {void}
  */
    
 function handleRangeInputChange() {
  mixer.filter(mixer.getState().activeFilter);
 }

And finally the listner

maxSizeRangeInput.addEventListener('change', handleRangeInputChange);