Increase and decrease jQuery slider ui value by one step
<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>