jQuery UI Slider Heterogeneity

Question

I'm trying to implement a jQuery UI Slider with 3 step values: eg, 1, 3, 10.

I want the initial value to be set to 3, but I need the '3' (and the slider handle) to be in the middle of the slider. So half the slider would be from 1 to 3, and the other half would be from 3 to 10.

Something like: 1----------2---------3-4-5-6-7-8-9-10

if I use:

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

...I get something like: 1-2-3-4-5-6-7-8-9-10, with the handle over the 3

Is there a way to accomplish this?

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

Answer 1

Here is a possible solution:

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