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