title: Increase and decrease jQuery slider ui value by one step
body: <p>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. </p>
  
  <p><a href="https://jsfiddle.net/martynava/jrx8rz79/6/" rel="nofollow">https://jsfiddle.net/martynava/jrx8rz79/6/</a></p>
  
  <p><a href="http://i.stack.imgur.com/tZGoa.png" rel="nofollow">slider with input field and increase/decrease buttons</a></p>
  
  <p>Code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);        
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know what is the best way to make it work. Thank you in advance</p>