javascript - jQuery UI slider 异构性

Question

我正在尝试实现一个具有 3 个步长值的 jQuery UI slider :例如 1、3、10。

我希望将初始值设置为 3，但我需要“3”(和 slider handle )位于 slider 的中间。因此 slider 的一半将从 1 到 3，另一半将从 3 到 10。

类似于: 1----------2---------3-4-5-6-7-8-9-10

如果我使用:

$('#mySlider').slider({
    min: 1,
    max: 10,
    value: 3
});

...我得到类似的信息: 1-2-3-4-5-6-7-8-9-10， handle 位于 3 上方

有办法实现这一点吗？

$('#mySlider').slider({
    min: 1,
    max: 10,
    value: 3,
    heterogeneity: [1/3 | 3/10] // maybe like this?
});

Answer 1

这是一个可能的解决方案:

var steps = [1, 1, 1, 1,
             2, 2, 2, 2,
             3, 4, 5, 6,
             7, 8, 9, 10];

$("#slider").slider({
    min: 1,
    max: steps.length - 1,
    value: 8, // actual value in steps array
    slide: function(event, ui) {
        $("#value").text(steps[ui.value]);
    }
});

jsfiddle