Jquery UI slider : progressive scale divisions and grid

Question

我需要做一个如下图所示的 slider :

我很高兴使用标准的 Jquery UI Slider，但它默认不支持比例划分，并且做不规则比例很棘手(不是 1|2|3|4|5 而是 1|2|5| 10|20)。

还有替代 slider 插件( http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/ )，但它不支持通过单击比例来更改 slider 位置的可能性。

对于我的任务有一些简单的解决方案吗？

Answer 1

将所需的值存储在数组中并通过 slider 的值“选择”一个对我来说似乎是最简单的解决方案，因为无论如何您都必须自己提供标签:

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/