jQuery UI的滑塊：漸進式刻度和網格

Question

我需要做一個滑塊像下面的圖片：

我將是不錯的使用非標準jQuery UI的滑塊，但它不支持（不是1 | 2 | 3 | 4 | 5，而是1 | 2 | 5 | 10 | 20），這是非常棘手的。

有替代滑塊插件（http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/），但它不支持通過單擊比例來更改滑塊位置的可能性。

是否有一些簡單的解決方案來執行我的任務？

Answer 1

在陣列中存儲所需的價值觀和「採摘」一個由滑塊的價值似乎最簡單的解決方案給我，因爲你反正必須提供標籤自己：

var steps = [0, 20, 30, 50, 75, 100, 150, 200, 300]; 

$("#slider").slider({ 
    range: "min", 
    value: 0, 
    min: 0, 
    max: steps.length, 
    step: 1, 
    slide: function(event, ui) { 
     $("#amount").text(steps[ui.value]); 
    } 
}); 

試試：http://jsfiddle.net/mwh2u/