'How to make a table filters with checkboxes and slider range?

i need to make a table with filters: two filters depends on checkboxes and one on slider range. Filters with checkboxes works fine, range too but they don't work together. I need help with that - how to combine checkbox filters with slider filter? How to combine below code to make it work together (checkboxes and slider-range as filters)?

    var $filterCheckboxes = $('#filters input[type="checkbox"]');

    $filterCheckboxes.on('click', function() {
        $('.list__img').hide();
    });

    // Read All Available Filter Groups
    var allFilters = [];
    $filterCheckboxes.each(function() {
        if ($.inArray(this.name,allFilters) == -1){
          allFilters.push(this.name);
      }  
    });

  $filterCheckboxes.on('change', function() {
  
    // create a collection containing all of the filterable elements
    var $filteredResults = $('.list__item');
  
      var $filterCategoryApplied = 0;
    
    $.each(allFilters, function(arIndex, filterName) {
    // console.log(filterName); 
      var $filterCheckboxCategory = $('#filters input[name='+filterName+']').filter(':checked');
      
    console.log(filterName + ' length = ' + $filterCheckboxCategory.length);
     
     if ( $filterCheckboxCategory.length === 0 ) {
  //    alert('none checked for ' + filterName);
      $filteredResults = [];
     }
    });
  
  console.log('start checking');
  
      // Read Selectetd Filters
    var selectedFilters = {};
    $filterCheckboxes.filter(':checked').each(function() {
      if (!selectedFilters.hasOwnProperty(this.name)) {
        selectedFilters[this.name] = [];
      }
      selectedFilters[this.name].push(this.value);
    });
  
    // loop over the selected filter name -> (array) values pairs
    $.each(selectedFilters, function(name, filterValues) {
  
      // filter each .flower element
      $filteredResults = $filteredResults.filter(function() {
  
        var matched = false,
          currentFilterValues = $(this).data('category').split(' ');
  
        // loop over each category value in the current .flower's data-category
        $.each(currentFilterValues, function(_, currentFilterValue) {
  
          // if the current category exists in the selected filters array
          // set matched to true, and stop looping. as we're ORing in each
          // set of filters, we only need to match once
  
          if ($.inArray(currentFilterValue, filterValues) != -1) {
            matched = true;
            return false;
          }
        });
  
        // if matched is true the current .flower element is returned
        return matched;
  
      });
    });
  
    $('.list__item').hide().filter($filteredResults).show();
  
  });

  



    $( "#slider-range" ).slider({
      range: true,
      min: 34,
      max: 105,
      values: [ 34, 105 ],
      slide: function( event, ui ) {
        // in this function we can define what happens when a user changes the sliders
        $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        
        var table = document.getElementById("list");
        for (var i = 1, row; row = table.rows[i]; i++) {
           //iterate through rows (we SKIP the first row: counter starts at 1!)
           for (var j = 0, col; col = row.cells[j]; j++) {
               //iterate through columns: if first column not in range: HIDE, else SHOW
              
               if (j == 3) {   
                let jTxt = $(col).find('.size-full').html();
                let jDot = jTxt.toString().replace(/\,/g, '.');
                let jRound = Math.round(jDot);
                   if (jRound >= ui.values[ 0 ] && jRound <= ui.values[ 1 ]) {
                  
                            $(row).show();
                       
                   } else {
                       $(row).hide();
                   }
               }
           }  
        }          
      }
    });
      
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " - " + $( "#slider-range" ).slider( "values", 1 ) );


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source