返回jquery-ui滑块上Chaged句柄的索引

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

Answer 2

For anyone seeing this after the March 2015 patch that added the handleIndex property to the ui object, if you need the index of the current handle, you can just use, for example:

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