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

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

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/