Почему не пропадают блоки

В этом коде блоки, которые не входят в диапазон слайдера должны пропадать, но этого почему то не происходит

    boxs = $('.shop'),
    length = boxs.length;
filterAll.text(length);

// Checkbox
$('input:checkbox').on('change', function() { 




  
   var 
     filter = new RegExp($(":checkbox:checked")
                         .map(function() {
                           return this.value;
                         })
                         .get()
                         .join("|") );

  //console.log(filter);
  
  $(".shop").each(function() {
    var $this = $(this);
    $this[filter.source != "" && filter.test($this.attr("class")) ? "show" : "hide"]();
        
  });        
});
    filterAll.text(length);
    var range = document.getElementById('range'),
    t = [],
    maximum = parseInt(range.attributes.max.value, 10),
    minimum = parseInt(range.attributes.min.value, 10),
    delta = (maximum - minimum) / 4,
    options = {
      min: [minimum],
      "20%": 1000,
      "40%": 1500,
      "60%": 2000,
      "80%": 2500,
      max: [maximum]
    };

//console.log(minimum + delta * 1, 1e6);

t.push(parseInt(range.attributes.min.value, 10)), 
  t.push(parseInt(range.attributes.max.value, 10));
var n = parseInt(range.attributes.max.value, 10); 
// i = parseInt(range.attributes.min.value, 10),

noUiSlider.create(
  range, 
  {
    range: options,
    start: t,
    connect: !0,
    pips: {
      mode: "range",
      density: 5
    }
  }
);




range.noUiSlider.on('change', function(values, handle){
  $(".shop").each(function() {
    var $this = $(this);
        price = $this.data('price');
    
    var val1 =  values[0];
    var val2 =  values[1];
    
    if(price <= val2 && price >= val1 ) {
      $this.show();
    }else {
      $this.hide();
    }
    
  });
});```

    <div class="section">
        <!-- container -->
        
        <div class="container">
            
            <!-- row -->
            <div class="row">
                <div id="aside" class="col-md-3">
                    <div class="aside">
                        <h3 class="aside-title">Price</h3>
                        <div class="price-filter">
                            <div class="filter">
                                Test
                                <ul class="list">
                                  <li class="item">
                                    <input type="checkbox" id="room-1" value="room-1">
                                    <label for="room-1" class="filter-item" >
                                      1        
                                    </label>
                                  </li>
                                  <li class="item">
                                    <input type="checkbox" id="room-2" value="room-2">
                                    <label for="room-2" class="filter-item" >
                                      2        
                                    </label>
                                  </li>
                                  <li class="item">
                                    <input type="checkbox" id="room-3" value="room-3">
                                    <label for="room-3" class="filter-item" >
                                      3        
                                    </label>
                                  </li>
                                </ul>
                                <br>
                                
                                Test
                                <ul class="list">
                                  <li class="item">      
                                    <input type="checkbox" id="area-1" value="area-1">
                                    <label for="area-1" class="filter-item" >
                                      50-100        
                                    </label>
                                  </li>
                                  <li class="item">
                                    <input type="checkbox" id="area-2" value="area-2">
                                    <label for="area-2" class="filter-item" >
                                      100-200        
                                    </label>
                                  </li>
                                </ul>
                            <div class="slider-wrapper">
                                <div id="range" max="10000" min="100"></div>
                              </div>
                            </div>
                            <!-- <div class="input-number price-min">
                                <input id="price-min" min="100" type="number">
                                <span class="qty-up">+</span>
                                <span class="qty-down">-</span>
                            </div>
                            <span>-</span>
                            <div class="input-number price-max">
                                <input id="price-max" max="100000" type="number">
                                <span class="qty-up">+</span>
                                <span class="qty-down">-</span>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
            
                    <div class="col-md-4 col-xs-6">
                        <div class="shop">
                            <div class="shop-img">
                                <img src="./img/product01.png" alt="" width="50" height="200">
                            </div>
                            <div class="shop-body">
                                <h3>Букет 1</h3>
                                <h4 class="product-price" data-price="1000">1000р</h4>
                                <a href="#" class="cta-btn">Купить  <i class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- /shop -->

                    <!-- shop -->
                    <div class="col-md-4 col-xs-6">
                        <div class="shop">
                            <div class="shop-img">
                                <img src="./img/product01.png" alt="" width="50" height="200">
                            </div>
                            <div class="shop-body">
                                <h3>Букет 2</h3>
                                <h4 class="product-price" data-price="3000">3000р</h4>
                                <a href="#" class="cta-btn">Купить  <i class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- /shop -->

                    <!-- shop -->
                    <div class="col-md-4 col-xs-6">
                        <div class="shop">
                            <div class="shop-img">
                                <img src="./img/product01.png" alt="" width="50" height="200">
                            </div>
                            <div class="shop-body">
                                <h3>Букет 3</h3>
                                <h4 class="product-price" data-price="5000">5000р</h4>
                                <a href="#" class="cta-btn">Купить  <i class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>  ```