Return the index of chaged handle on jquery-ui slider

Question

I have a jquery ui slider:

$( "#slider" ).slider({
    values: [ 10, 25,45,176 ],
    max: 190,
    change: function( event, ui ) {  
        var index = $("#slider span").index(ui.handle);
        $( "#index" ).text( "That was handle index #" + index );
    }
});

I want to return the index of the changed single handle. But the handle object returns all spans (handles).

How can i do that?

Answer 1

Inside of the change event function, ui.handle is the element that was changed. Therefore, use $(ui.handle).index() to access the index of the element. Note: The index is zero-based.

Example Here

$("#slider").slider({
    values: [ 10, 25,45,176 ],
    max:190,
    change: function( event, ui ) {  
        var index = $(ui.handle).index();
        $("#index").text( "That was handle index #" + index );
    }
});