滑塊UI從數組中選取值(它也可以用'加號'和'減號'按鈕進行操作) - 但它不更新輸入字段中的數字,直到鼠標點擊'這不是非常用戶友好的。更新數組中的滑塊UI值
$(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);
我不知道如何得到它的工作。
*直到鼠標是「未點擊」的
slide
事件*這是什麼意思? –他意味着當你釋放鼠標,然後值被更新。當然,這是一個點擊事件,鼠標被釋放後,它會執行代碼。 – Jorrex
這可能不是解釋它的最好方式,但值只有在鼠標按鈕釋放後纔會更新。我試圖讓滑動條的值更新,而它的句柄被拖動。 –