JQuery Slider, how to make “step” size change

Question

Is it possible to use the JQuery Slider (range slider / dual slider) to have non-linear (non consistent \"step\" size) values?

I want to horizontal Slider to look li

Answer 1

here's how i did mine. demo here - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

have an array of your desired values

var amts=[50,100,150,200,225,250,300];

have the slider increment from 0 to the length of the array, with steps of 1. output the value from the index of the array instead of using the slider's actual value.

this way the increments and steps are evenly distributed. after that you can just grab the value of the label or save it to a var.

$('#amtslider').slider({
    min:0,
    max:amts.length-1,
    step:1,
    value:0,
    change:function(event, ui){
        //alert(amts[$(this).slider("value")]);
        //alert($(this).slider("value"));
        $('#lbl_amt').val(amts[$(this).slider("value")]);
    },
    slide:function(event, ui){
        $('#lbl_amt').val(amts[$(this).slider("value")]);
    }
});