Question

I’ve implemented a custom slider here: http://jsfiddle.net/4wZ8d/

It works in a way that the slider handle is hidden initially, and when the user clicks anywhere on the slider the handle appears, by using:

$("a.ui-slider-handle").hide();
$("a.ui-slider-handle").show();

However, the user has to click at least twice on the slider before he/she can use the keyboards (i.e. left or right key) to move the handle.

Does someone know what is causing this behavior?

Answer 1

You can only use the arrow keys to move the slider if the slider has focus. Simple add:

$("a.ui-slider-handle").show().focus();

Note that if the slider loses focus, the arrow keys become disabled again. You would have to bind .keypress or the like to document if you wanted them to respond regardless, but that’s probably not the best idea.