[英]Jquery ui slider move to the next value
這是我想要完成的示例圖像
假設我從150值單擊,手柄應該只移動到50而不會跳到150.我再次點擊它從50移動到100。
反過來說,手柄是值150然后我點擊值5,它不應該直接跳到5它應該從150移動到100。
我怎樣才能做到這一點?
這是我的代碼:
var valMap = [5, 10, 20, 50, 100, 150];
value = 0;
var slider = $("#slider").slider({
disabled: false,
animate: true,
min: 0,
max: valMap.length - 1,
slide: function (event, ui) {
slider.slider("option", "animate", "slow");
},
change: function () {
var Slideval = $(this).slider('value');
console.log(Slideval, value)
if(value < Slideval) {
console.log("incremented")
} else if(value > Slideval) {
console.log("decremented")
}
value = Slideval;
}
});
這是一個示例jsfiddle: http : //jsfiddle.net/endl3ss/jNwww/21/
然后你可以使用當我們移動滑塊時會產生的事件,然后設置slider的值。我們可以手動設置滑塊值。
這是事件代碼
slide: function( event, ui ) {
// code
},
$('#id').slider("value",value); //using this we can set the slider value
我不太了解滑塊,但這是一個基於您的規范的工作解決方案:
這是完整的參考代碼
var valMap = [5, 10, 20, 50, 100, 150,500,1000,5000];
value= 0;
var lastSlideValue = 0;
var internalSlideCalling = false;
var slider = $("#slider").slider({
disabled : false,
animate : true,
min : 0,
max : valMap.length - 1,
slide : function(event, ui) {
slider.slider("option", "animate", "slow");
},
change: function(){
var Slideval = $(this).slider('value');
if (!internalSlideCalling)
{
if (Slideval>lastSlideValue && lastSlideValue < $(this).slider('option','max'))
{
Slideval = lastSlideValue+1;
}
else if (lastSlideValue > $(this).slider('option','min'))
{
Slideval = lastSlideValue-1;
}
lastSlideValue = Slideval;
}
console.log(Slideval, value)
if(value < Slideval) {
console.log("incremented")
} else if(value > Slideval){
console.log("decremented")
}
value = Slideval;
if (!internalSlideCalling){
internalSlideCalling = true;
$(this).slider('value',Slideval);
}
else
internalSlideCalling = false;
}
});
$("#slider").slider('values',valMap);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.