jQuery UI的滑塊移動到下一個值

enter image description here

說我從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/

來源

2013-05-15 Defyleiti

有助於鏈接到http：// jsfi上的示例ddle.net或http://jsbin.com – James

我剛剛加了一個jsfiddle – Defyleiti

也看這個jsfiddle http://jsfiddle.net/5xMMz/11/ –

我不知道滑塊太多，但這裏是根據您的規範工作的解決方案：

http://jsfiddle.net/5xMMz/11/

，這裏是全供參考的代碼

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

來源

2013-05-15 07:45:08

是的，這就是我要找的。非常感謝。 – Defyleiti

只有一個問題，爲什麼動畫功能不起作用？ – Defyleiti

當你長時間按下時，動畫功能起作用。 – Defyleiti

使用

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

這裏是鏈接瞭解更多信息 - http://jqueryui.com/slider/#steps

來源

2013-05-15 07:08:16

那不行，句柄仍然會從20移到150當我點擊150值並忽略其餘的值。 – Defyleiti

在Windows 7中，菜單托盤中有一個音頻圖標。我正在使用jquery ui滑塊實現相同的功能。 – Defyleiti

然後你可以使用當我們移動滑塊時將會引發的事件然後設置滑塊的值。我們可以手動設置滑塊的值。

這是事件代碼

slide: function(event, ui) { 
      // code 
     }, 




$('#id').slider("value",value); //using this we can set the slider value

來源

2013-05-15 07:16:20 PSR

你可以展示如何做到這一點的示例代碼？ – Defyleiti

只是等待。我會給 – PSR

好吧我會嘗試一個。 – Defyleiti

jQuery UI的滑塊移動到下一個值

回答

相關問題