具有固定最小值的jQuery UI滑塊：顯示最小範圍，而不是最小絕對值？

Question

我使用的固定最小值爲20的jQuery滑塊，如described in the docs。

但是，這不是我所需要的。我希望滑塊的可視範圍爲0-100，但不應允許用戶將滑塊移動到小於20.

換句話說，滑塊的句柄不應該全部通往滑塊左側的路徑（如此刻），但應顯示範圍0-20。

這裏是a JSFiddle to show what I mean，這裏是當前代碼：

$("#range-slider").slider({ 
    range: "min", 
    min: 20, 
    max: 100, 
    value: 20, 
    step: 20, 
}); 

任何想法？

Answer 1

你應該使用幻燈片功能和強制執行

$(document).ready(function() { 

    // I want the visual range to be 0-100, 
    // but the minimum allowed value to be 20 - 
    // so in other words, the handle never gets 
    // all the way to the LHS of the slider, 
    // but shows the range 0-20. 
    // Is this possible? 
    $("#range-slider").slider({ 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 20, 
     step: 20, 
     slide: function(event, ui) { 
      if (ui.value < 20) { 
       return false; 
      } 
     } 
    }); 

}); 

http://jsfiddle.net/nicolapeluchetti/kGtsN/17/

從被觸發動過程中，每一個鼠標移動此事件的文檔

幻燈片

。使用ui.value （單柄滑塊）獲取當前手柄的值， $（..）。slider（'value'，index）獲取另一個手柄的值。

根據ui.value返回false以防止幻燈片。