Кнопки UIslider не работают с фильтром флажков

Я пытаюсь понять, как заставить кнопки ползунка перемещать его вместо обычного скольжения, но при этом фильтр флажков все еще работает должным образом.

Когда я устанавливаю кнопки для перемещения ползунка, фильтр не работает должным образом. Проблема возникает, когда я меняю код слайдера с: values: [10000] на: value: 10000.

Вот мой пример кода и jsfiddle с правильно работающим фильтром и не работающими кнопками (в этом примере работает только фильтрация слайдером + флажком, чтобы показать, как мне нужно фильтровать продукты). https://jsfiddle.net/7er9sxzq/

Я ищу любую помощь, чтобы заставить его работать.

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");
});