Q:

Select slider handle when keys are pressed - jqueryUI

I have a single slider on my page, and I frequently use the keyboard to move the handle left and right. However, if the handle is not selected, it won't slide when I press the keys. I've tried simulating a click on the handle, but that doesn't seem to select it.
$handle = $slider.find('.ui-slider-handle');
$handle.click();

How do I move the handle left and right with my keyboard without having to select it first?

A:

Pass the keyup and keydown events to the handle when the appropriate keys are pressed. You should only do this when the handle is not already selected.
$handle = $slider.find('.ui-slider-handle')
$(document).on('keyup keydown', function(e) {
  if ( $handle.hasClass('ui-state-focus') ) return;

  if (e.which === 37 || e.which === 39) {
    e.target = $handle.get(0);
    $handle.triggerHandler(e);
  }
});

37 is the left key
39 is the right key

