Martyna va February 2016

Increase and decrease jQuery slider ui value by one step

I've created a slider that displays value based on specified array. I want to increase or decrease the value by one step using 'plus/minus' buttons which seems working however the value is not updating.

https://jsfiddle.net/martynava/jrx8rz79/6/

slider with input field and increase/decrease buttons

Code below:

$(function() {
var sizes = [ "10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "200", "300", "400", "500", "1000" ];
$("#slider-range-max").slider({
  range: "max",
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $("#cap").val(sizes[ui.value]);
  }
});
$( "#cap" ).val( $( "#slider-range-max" ).slider( "value" ) + ' TB' );
});


$("#plus1").click(function() {
    var value = $("#slider-range-max").slider("value")
        , step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value + step);
});

$("#minus1").click(function () {
    var value = $("#slider-range-max").slider("value")
        , step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value - step);        
});

Does anyone know what is the best way to make it work. Thank you in advance

Answers


gaemaf February 2016

There are some errors in your code like for instance the click events must be inside the document ready otherwise you need to use the document on event listener. What you are looking for is:

$(function () {
  var sizes = ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "200", "300", "400", "500", "1000"];
  $("#slider-range-max").slider({
    range: "max",
    min: 0,
    max: sizes.length - 1,
    step: 1,
    create: function(event, ui) {
      $("#cap").val(sizes[0] + ' TB');
    },
    change: function (event, ui) {
      $("#cap").val(sizes[ui.value] + ' TB');
    }
  });

  $("#plus1").click(function () {
    var value = $("#slider-range-max").slider("value");
    var step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value + step);
  });

  $("#minus1").click(function () {
    var value = $("#slider-range-max").slider("value")
    var step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value - step);
  });
});
.slider {
  position: relative;
  margin-top: 20px;
  margin-bottom: 15px;
  width: 90%;
  background: #2A3137;
  /* -moz-box-shadow: inset 0 0 10px #999;
  -webkit-box-shadow: inset 0 0 10px #999;
  box-shadow: inset 0 0 10px #999;*/
  height: 15px;
  border-radius: 10px;
  border: 1px solid #DDDDDD;
  margin-left: 15px;
}

.slider .ui-slider-handle {
  position: absolute;
  background: #10A447;
  border-radius: 5px;
  width: 20px;
  height: 50px;
  top: -16px;
  left: 50px;
  border-style: none;
  box-shadow: none;

}

input[type=text] {
  border: 1px solid #10A447;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  pad 

Post Status

Asked in February 2016
Viewed 1,440 times
Voted 12
Answered 1 times

Search




Leave an answer