ここに私が達成しようとしているもののサンプル画像があります
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/