jQuery UI的滑块异质

Question

我试图实现一个jQuery UI滑块3个长值：例如，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