Question

In order to gather some statistics on how users interact with an web application, I would like to know how they use a certain JQuery UI Slider. Specifically, I would like to know whether they used the mouse or the keyboard (the arrow keys) to manipulate the slider.

My code is as follows:

$test.slider({range: "min", step: 0.1, slide: updatePosition, stop: slideEnd, start: slideStart});

How would I detect, within my functions slideStart and slideEnd, whether the arrow keys were pressed or the mouse was used? Would I have to modify the plugin source? That’s what I would like to avoid.

Would adding another handler to $test for click/keypresses be the best bet?

Answer 1

I figured out a way that seems the cleanest. I just added:

$test.keyup(slideKey);

Where $test is my slider div. I had to use keyup() rather than keypress() to catch the arrow keys in Chrome.

In the slideKey function, I just use the event object passed in.

function slideKey(e)
{
    console.log(e.keycode);
}