jQuery UI 滑块异质性

Question

我正在尝试实现具有 3 个步长值的 jQuery UI 滑块：例如，1、3、10。

我想将初始值设置为 3，但我需要“3”（和滑块手柄）位于滑块的中间。所以滑块的一半是从 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，手柄在 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

jQuery UI 滑块异质性

jQuery UI Slider Heterogeneity

javascript

jquery-ui

slider