Search the Community

Hi Guys, Recently I was working on my new project and I need to implement price range filtering. I am using noUiSlider which came with the template that I have purchased. How can I pass values of minimum and maximum values using ajax? I am using foreach loop as shown in code in the code <ul class="row shop list-unstyled" id="grid"> <!-- product --> <?php $result = $pages->get("/sadakalar")->children();?> <?php foreach ($result as $r): ?> <li class="col-sm-4 col-md-3 col-lg-3 product m-product" data-groups='["bedroom"]'> <div class="img-bg-color primary"> <h5 class="product-price" data-price="<?=$r->price;?>"><?=$r->price_range->max;?> manat</h5> <a href="<?=$r->url;?>" class="product-link"></a> <!-- / product-link --> <img src="<?=$r->image->first()->url;?>" alt="<?=$r->image->description;?>"> <!-- / product-image --> <!-- product-hover-tools --> <div class="product-hover-tools"> <a href="<?=$r->url;?>" class="view-btn" data-toggle="tooltip" title="Giňişleýin gör"> <i class="lnr lnr-eye"></i> </a> <!--<a href="shopping-cart.html" class="cart-btn" data-toggle="tooltip" title="Add to Cart"> <i class="lnr lnr-cart"></i> </a>--> </div><!-- / product-hover-tools --> <!-- product-details --> <div class="product-details"> <h5 class="product-title"><?=$r->title;?></h5> <!--<p class="product-category">Hemme zat içinde</p>--> </div><!-- / product-details --> </div><!-- / img-bg-color --> </li> <!-- / product --> <?php endforeach; ?> <!-- sizer --> <li class="col-sm-4 col-md-3 col-lg-6 shuffle_sizer"></li> <!-- / sizer --> </ul> <!-- / products --> Here is the code of my range slider: Values of min and max values are stored inside of <span> <!-- filter-by-price widget --> <div class="widget"> <h5 class="widget-title">Baha boýunça saýhalla</h5> <div id="range-slider" class="noUi-target noUi-rtl noUi-horizontal"> </div><!-- / range-slider --> <div class="range-filter"> <div class="column filter-button"> <button type="submit" class="btn btn-xs btn-default-filled btn-rounded" id="filter">Saýhalla</button> </div> <!--/ filter-button --> <div class="column range-values"> <p>$<span class="value" id="range-slider-value-min"></span> - $<span class="value" id="range-slider-value-max"></span></p> </div><!-- / range-values --> </div><!-- / range-filter --> <!-- / filter-by-price widget --> And lastly here is my javascript of which handles the changes in noUiSlider: <script> var limitSlider = document.getElementById('range-slider'); noUiSlider.create(limitSlider, { start: [ 100, 5000 ], limit: 10000, behaviour: 'drag', connect: true, range: { 'min': 0, 'max': 10000 } }); var limitFieldMin = document.getElementById('range-slider-value-min'); var limitFieldMax = document.getElementById('range-slider-value-max'); var dataString = limitFieldMin + limitFieldMax; limitSlider.noUiSlider.on('update', function( values, handle ){ (handle ? limitFieldMax : limitFieldMin).innerHTML = values[handle]; }); </script> So what I want to do is, whenever user slides the range filter, it automatically throws the filtered products. I have also attached the picture of my website. Any help is greatly appreciated. Thank you in advance!