更新数组中的滑块UI值

Question

滑块UI从数组中选取值（它也可以用'加号'和'减号'按钮进行操作） - 但它不更新输入字段中的数字，直到鼠标点击'这不是非常用户友好的。

Here is a link to 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]); 
 
    }, 
 
    change: 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); 
 
    }); 
 
});

<div id="quote-input" class="slider-input"> 
 
<div id="minus3" class="minus"><span>-</span></div> 
 
<div id="plus3" class="plus">+</div> 
 
\t \t \t  <input type="text" id="sup" class="slider-value"> 
 

 
      
 
<div id="slider-range-max3" class="slider"> 
 
<span class="ui-slider-handle"></span> 
 
</div>

我已经找到了一个类似的解决方案上Fiddle和尝试应用到我的情况，但是没有成功。

所添加的代码不工作：

var value = $(this).val(), 
    button = $("#sup").val(sizes[ui.value]); 
    setTimeout(function() { /* update text after jQM refreshes slider */ 
    button.text(custom[value]); 
}, 0); 

我不知道如何得到它的工作。

Answer 1

要更新的值，而滑动，你需要使用的，而不是change事件

$("#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);