CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Łukasz
Łukasz

Reputation: 65

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 movement.

Snippet:

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 no checkboxes are checked, don't filter with them
  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() {
  // 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,
    values: [10000],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + " 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);

  $("#price").slider(options);
  $("#amount").val($("#price").slider("values", 0) + " zł");

});


// The below functions are not working
$('#increase').click(function() {
  var sliderCurrentValue = $("#price").slider("option", "value");
  slider.slider("value", sliderCurrentValue + 1);
});

$('#decrease').click(function() {
  var sliderCurrentValue = $("#price").slider("option", "value");
  slider.slider("value", sliderCurrentValue - 1);
});
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;
}
<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>

<span><input type="text" id="amount" readonly ></span>
<div class="slider" id="price"></div>

<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
  + Increase
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
  - Decrease
</div>

Upvotes: 1

Views: 3282

Answers (1)

Takit Isy
Takit Isy

Reputation: 10081

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;

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 no checkboxes are checked, don't filter with them
  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() {
  // 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: Modified
    slide: 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: 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;
}


/* TAKIT: Added the below */
.sliderButtons {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}
<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>

<span><input type="text" id="amount" readonly ></span>
<div class="slider" id="price"></div>

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

Upvotes: 2

Related Questions