cannot change focus to slider in jquery

Question

I have a function that changes focus whenever a user presses enter. This function works great on most pages, but now I have a page with 1 select and 2 sliders (jqueryui). When I press enter, focus will not change to a slider. A console.log statements show me that my select is returning the correct array of elements:

0: select#field_odometerunitsselect
1: div#field_fuelquantityrangeslider.ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all
2: div#field_fueldistancerangeslider.ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all

and my javascript is correctly changing to the next element in the array (in this case 1):

$('#'+inputs.eq(nextinput).id).focus().select();

Can someone tell me why the line above will not change focus to the slider?

To further analyze, I tried manually setting focus with this line

$('#field_fuelquantityrangeslider').focus();

and it too fails. So it's not a code problem, it's a slider thing. How does one set focus to a slider?

Answer 1

You need to target the slider handle (see https://stackoverflow.com/a/13692745/786999):

$('#field_fuelquantityrangeslider .ui-slider-handle').focus();