How To Add Plus/minus Buttons To Slider

I'm looking for help to make +/- buttons - to change slider value. What I'm doing wrong? I'd like to make it more useful. At this point user can only change the value by sliding mo

Solution 1:

Here is what I propose you:

• Added a mySlider variable so that the slider is accessible with that variable, (the variable slider used by your buttons wasn't defined)
• Added a class for the buttons, with a custom attribute step so that it stays easy. Removed inline styling in the HTML, and put it in the CSS.
• Used value instead of values everywhere, because values should only be used when your slider got multiple values.
• Note that your increase/decrease values should match your slider's step requirement

Working snippet:

var mySlider;

functionfilterPrice(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);
  });
}

functionfilterCheckboxes(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() {
    returnthis.value;
  });

  // If no checkboxes are checked, don't filter with themif (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;
  });

}

functionfilterProducts() {
  // Reset filters
  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,
    value: 10000, // TAKIT: Modifiedslide: function(event, ui) {
      $("#amount").val(ui.value + " zł");
    },
    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); // Added slider =
  $("#amount").val(mySlider.slider("value") + " zł");

});


// TAKIT: Totally modified the below
$('.sliderButtons').click(function() {
  var step = +$(this).attr("step"); // Using the custom attribute step from the HTML
  mySlider.slider("option", "value", mySlider.slider("value") + step);
  $("#amount").val(mySlider.slider("value") + " zł");
});

body {
  font-family: 'Arial';
  color: #646464;
}

.continents-wrap {
  float: left;
  width: 20%;
  margin: 05%00;
  padding: 0;
}

.tabela-wrap {
  float: left;
  width: 50%;
  margin: 05%00;
  padding: 0;
  position: relative;
}

.tabela {
  float: left;
  width: 50%;
}

.tabeladiv {
  float: left;
  width: 90%;
  height: 68px;
  line-height: 68px;
  padding: 05%;
  background: #eee;
  margin: 001px;
  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: 00;
}

.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;
}


/* TAKIT: Added the below */.sliderButtons {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

<scriptsrc="https://code.jquery.com/jquery-1.7.2.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script><span><inputtype="text"id="amount"readonly ></span><divclass="slider"id="price"></div><divclass="sliderButtons"step="500">+ Increase</div><divclass="sliderButtons"step="-500">- Decrease</div>