[英]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.