Update slider ui value with button

Question

Trying to figure out a way to update slider ui value not only on handle change but also on (plus/minus) button click. It does move the handle by one step on click, but not updating the value. Does anyone know where the problem is?

Fiddle

 $(function () { var sizes = [ "0 years", "1 year", "2 years", "3 years", "4 years", "5 years", "6 years", "7 years" ]; $("#slider-range-max3").slider({ range: "max", min: 0, max: sizes.length - 1, step: 1, create: function(event, ui) { $("#sup").val(sizes[0]); }, slide: function (event, ui) { $("#sup").val(sizes[ui.value]); $(".sup").text(sizes[ui.value]); var value = $(this).val(), button = $("#sup").val(sizes[ui.value]); setTimeout(function () { /* update text after jQM refreshes slider */ button.text(custom[value]); }, 0); } }); $("#plus3").click(function () { var value = $("#slider-range-max3").slider("value"); var step = $("#slider-range-max3").slider("option", "step"); $("#slider-range-max3").slider("value", value + step); }); $("#minus3").click(function () { var value = $("#slider-range-max3").slider("value") var step = $("#slider-range-max3").slider("option", "step"); $("#slider-range-max3").slider("value", value - step); }); }); 

Answer 1

Your click functions need to update the text and value of the slider

Add something like this

$("#sup").val(sizes[value+step]).text(sizes[value+step]);

as the last line of your click functions (obviously change the "+"s to "-"s depending on what the user clicked).

JSfiddel here