Jquery UI Slider：渐进式比例分区和网格

Question

我需要做一个如下图所示的滑块：

我很高兴使用标准的Jquery UI Slider，但默认情况下它不支持比例分割，做不规则比例很棘手（不是1 | 2 | 3 | 4 | 5但是1 | 2 | 5 | 10 | 20）

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

我的任务是否有一些简单的解决方案？

Answer 1

将所需的值存储在数组中并且＆＃34;选择＆＃34;一个滑块的价值对我来说似乎是最简单的解决方案，因为你无论如何都必须自己提供标签：

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/