Javascript Jquery ui滑块移动到下一个值

这是我试图完成的一个示例图像

假设我从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;
    }
});

var-valMap=[5,10,20,50,100,150]；
数值=0；
变量滑块=$（“#滑块”）。滑块({
残疾人士:错,，
动画：对，
分:0,，
最大值：valMap.length-1，
幻灯片：功能（事件、用户界面）{
滑块（“选项”、“动画”、“慢”）；
},
更改：函数（）{
var Slideval=$（this.slider（'value'）；
console.log（Slideval，value）
如果（值滑动评估）{
console.log（“递减”）
}
值=Slideval；
}
});

下面是一个示例JSFIDLE:

使用

$("#slider").slider({
    step: 50
})

---

这是有关详细信息的链接-

然后您可以使用当我们移动滑块时将引发的事件，然后为滑块设置值。我们可以手动设置滑块值

这是事件代码

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);

var-valMap=[5,10,20,50,10015050010005000]；
数值=0；
var lastSlideValue=0；
var internalSlideCalling=假；
变量滑块=$（“#滑块”）。滑块({
残疾人士:错,，
动画：对，
分:0,，
最大值：valMap.length-1，
幻灯片：功能（事件、用户界面）{
滑块（“选项”、“动画”、“慢”）；
},
更改：函数（）{
var Slideval=$（this.slider（'value'）；
如果（！internalSlideCalling）
{
如果（Slideval>lastSlideValue&&lastSlideValue<$（此）.slider（'option'，'max'））
{
Slideval=lastSlideValue+1；
}
else if（lastSlideValue>$（this）.slider（'option'，'min'））
{
Slideval=lastSlideValue-1；
}
lastSlideValue=Slideval；
}
console.log（Slideval，value）
如果（值滑动评估）{
console.log（“递减”）
}
值=Slideval；
如果（！internalSlideCalling）{
InternalSlideCaling=true；
$（this）.slider（'value'，Slideval）；
}
其他的
内部滑动调用=错误；
}
});
$（“#滑块”）.slider（'values'，valMap）；

链接到上的示例会很有帮助，或者我刚刚添加了一个jsfiddle。同样，这个jsfiddle也不行，当我单击150值并忽略其余值时，句柄仍将从20移动到150。在windows 7中，菜单栏中有一个音频图标。我使用jQueryUI滑块实现了同样的功能。是的，这就是我要寻找的。非常感谢你。