jQuery UI Slider Uneven Steps or Increments

Here’s how to use the UI Slider from jQuery to have uneven steps or increments.

Check out the demo!

Have an array of values you want to use.

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")]);
    }
});

Easy, ain’t it?
Check out the demo!

Categorised in: jQuery

This post was written by admin