proPhet proPhet - 2 months ago 32
Javascript Question

jQuery UI Slider Heterogeneity

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

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