UIslider buttons doesn't work with checkbox filter

Question

I try to figure out how to force slider's buttons to move it instead of normal sliding, but keeping the checkbox filter still working by proper way.

When I set buttons to move slider then filter doesn't work the way it should. The problem is coming out when i change slider code from: values: [10000], to: value: 10000.

Here's my code and jsfiddle example with properly working filter and not working buttons (only slider + checkbox filtering works in that example to show how I need to filter products). https://jsfiddle.net/7er9sxzq/

I'm looking for any help to make it works.

CSS:

body { font-family:'Arial'; color:#646464; }        
    .continents-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; }     
    .tabela-wrap { float:left; width:50%; margin:0 5% 0 0; padding:0; position:relative; }  
    .tabela { float:left; width:50%; }
    .tabela div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; } 
    .number {font-size:12px;}


.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider-horizontal {
height: .8em;

}
.ui-slider-horizontal .ui-slider-handle {
top: -0.5em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: white 50% 50% repeat-x;
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    width: 30px;
    height: 30px;
    border: 3px solid #2F3D44;
    border-radius: 20px;
    background: white 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}
.slider1Hide {
display: none;
}
.sliderButtons {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

HTML:

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>



<input type="text" id="amount" readonly >
<div class="slider" id="price" ></div><br>
<div class="sliderButtons" step="500">+ Increase</div>
<div class="sliderButtons" step="-500">- Decrease</div>

<br><br>
            <div class="tabela-wrap">   
                    <label style="number"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
                    <label style="number"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
                    <label style="number"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
                    <label style="number"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
                    <label style="number"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
                    <label style="number"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
                    <label style="number"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
                    <label style="number"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
            </div>

            <br><br>

           <ul class="tabela lokata" id="products">
                <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
                <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
                <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
                <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
                <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
                <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
                <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
                <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>

            </ul>

          <div class="tabela-wrap">  
            <label id="found"></label>
          </div>

JS:

var mySlider;

function filterPrice(products) {
  let minP = $("#price").slider("values", 0);
  let maxP = $("#price").slider("values", 1);
  return products.filter(function() {
    let value = parseInt($(this).data("price"), 10);
    return !(value > maxP || value < minP);
  });
}

function filterCheckboxes(products) {
  checkboxes = $("input:checked").filter(function() {
    return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
  }).map(function() {
    return this.value;
  });


  if (checkboxes.length == 0) {
    return products;
  }

  return products.filter(function() {
    categories = $(this).data("category").toString().split(" ");
    let val = true;
    checkboxes.each(function() {
      if (!categories.includes(this[0])) {
        val = false;
        return;
      }
    });
    return val;
  });

}

function filterProducts() {
  products = $("#products li");
  products.hide();
  products = filterPrice(products);
  products = filterCheckboxes(products);
  products.show();

  let numItems = products.length;

  if (numItems > 0) {
    label = "We found " + numItems + " offers.";
  } else {
    label = "No results";
  }

  $("#found").text(label);
}

$(function() {
  let options = {
    min: 500,
    max: 100000,
    step: 500,
    values: [10000], // If changed to  value: 10000, other filters does not work
    slide: function(event, ui) {
      $("#amount").val(ui.value + " USD");
    },
    change: function(event, ui) {
      filterProducts();
    }
  };

  $("input").filter(function() {
    return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
  }).change(filterProducts);

  mySlider = $("#price").slider(options); 
  $("#amount").val(mySlider.slider("value") + " USD");

});


$('.sliderButtons').click(function() {
  var step = +$(this).attr("step"); 
  mySlider.slider("option", "value", mySlider.slider("value") + step);
  $("#amount").val(mySlider.slider("value") + " USD");
});

Answer 1

Is this the intended functionality?

$(document).ready(function(){
  // cache ref to all checkbox elements
  var checkboxes = $('input:checkbox'),
      // cache ref to results
      results = $('#results'),
      // cache ref to our list
      listItems = $('.tabela > li'),
      // cache amount ref
      amount = $('#amount'),
      // collection of selected checkbox elements
      selectedItems = [],
      // slider config
      slideOptions = {
        min: 500,
        max: 100000,
        step: 500,
        values: [10000],
        slide: function(event, ui) {
          amount.val(ui.values[0] + " USD");
        },
        change: function(event, ui) {
          updateList();
        }
      };
      
  // render our slider      
  var slider = $("#price").slider(slideOptions);
  
  amount.val($("#price").slider("values", 0) + " USD");
  
  checkboxes.on('change', function(){
    var id = this.id;

    if(this.checked){
      // push the element vs the value
      selectedItems.push(this.value);
    }else{
      // remove items on uncheck
      selectedItems.splice(selectedItems.indexOf(this.value), 1);
    }

    updateList();
  });

  var updateList = function(){
    // create map of values for joining
    var selectedItemsValues = selectedItems.sort().join(' '),
        // min value
			  minPrice = slider.slider('values', 0);
    
    // filter list items         
    listItems.hide().filter(function(){
      // get data attributes
      var data = this.dataset;
      // restrict list to price band and selections
      return Number(data.price) >= minPrice && (selectedItems.length ? data.category.includes(selectedItemsValues) : true);
    })
    .show();

    // count visible li only
    var total = $('.tabela li:visible').length;

    if(total === 0){
      results.html('We did not find any matches.');
    }else{
      results.html('We found ' + total + (total === 1 ? ' match' : ' matches' ) + '!');
    }
  }
  
  $('.sliderButtons').click(function() {
    var step = Number(this.dataset.step),
        value = slider.slider('values')[0];
        
      value += step;

      slider.slider('values', 0, value);

      amount.val(value + " USD");

      updateList();
  });
});

.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal {
  height: .8em;

}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.5em;
  margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: white 50% 50% repeat-x;
  color: #222222;
}
.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  width: 30px;
  height: 30px;
  border: 3px solid #2F3D44;
  border-radius: 20px;
  background: white 50% 50% repeat-x;
  font-weight: normal;
  color: #555555;
}
.slider1Hide {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<input type="text" id="amount" readonly>

<div class="slider" id="price"></div><br>

<button class="sliderButtons" data-step="500">+ Increase</button>
<button class="sliderButtons" data-step="-500">- Decrease</button>

<br><br>

<div class="tabela-wrap">   
  <label for="1"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label for="2"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label for="3"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label for="4"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label for="5"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label for="6"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label for="7"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label for="8"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
</div>

<br><br>

<ul class="tabela lokata" id="products">
  <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
  <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
  <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
  <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
  <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
  <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
  <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
  <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>
</ul>

<div id="results"></div>

Answer 2

I solve that problem by myself. I have changed code of slider to make it works.

I changed part of JS:

function filterPrice(products) {
  let minP = $("#price").slider("value");

  return products.filter(function() {
    let value = parseInt($(this).data("price"), 10);
    return !(value < minP);
  });
}