Clash of 2 JQuery functionalities!

Clash of 2 JQuery functionalities!

Hello;

I use 2 Javascript filters to filter the results based on hotel star rating and the price in this page.

The checkboxes filters hotels with minimum star rating.

The slider on the other hand filter the results based on the price.

The both work fine but the problem is when I use the slider it messes with the checkbox and checkboxes dont show correct results anymore!

Can anyone help?


I am pretty sure I have to change something in the slider function.
  1. //Slider Price
  2.     function showProducts(minPrice, maxPrice) {
  3.         $("#products li").hide().filter(function() {
  4.             var price = parseInt($(this).data("price"), 10);
  5.             return price >= minPrice && price <= maxPrice;
  6.         }).show();
  7.     }
  8.     $(function() {
  9.         var options = {
  10.             range: true,
  11.             min: 0,
  12.             max: <?php echo $maximum_number;?>,
  13.             values: [0, <?php echo $maximum_number;?>],
  14.             slide: function(event, ui) {
  15.                 var min = ui.values[0],
  16.                     max = ui.values[1];
  17.                 $("#amount").val("$" + min + " - $" + max);
  18.                 showProducts(min, max);
  19.             }
  20.         }, min, max;
  21.         $("#slider-range").slider(options);
  22.         min = $("#slider-range").slider("values", 0);
  23.         max = $("#slider-range").slider("values", 1);
  24.         $("#amount").val("$" + min + " - $" + max);
  25.         showProducts(min, max);
  26.     });

Thank you















    • Topic Participants

    • pmdg3