Question

I have a page with jQuery sliders, and moving those sliders sends values to a server. At the same time, the server is queried every second to get current state (for all fields on the page).

So I need to know if a slider (knob) is focused, or otherwise being toyed with, so the ajax code that sets values returned from the server can avoid trying to set the focused slider. Otherwise it bounces around while trying to move the slider.

Current code:

// Called by ajax's return from server, v is the server's value, to set on this slider
function ReportObjectSize (v)
{
    $('#slider_objsize').slider("option", "value", v);
}

and what I’m thinking I need is something like:

function ReportObjectSize (v)
{
  if (!$('#slider_objsize').slider.IsFocused()) // Some way to tell if it's focused
    $('#slider_objsize').slider("option", "value", v);
}

or maybe there’s a better way to do this in general?

Answer 1

You could check to see if #slider_objsize .ui-slider-handle:focus matches anything:

if($('#slider_objsize .ui-slider-handle:focus').length)
    // The handle has focus.
else
    // The handle doesn't have focus.

Demo: http://jsfiddle.net/ambiguous/YKRme/1/

Note that the :focus selector was added in jQuery 1.6 so the above won’t work with earlier versions of jQuery.

Alternatively, you could hook into the start and stop events to keep track of when the user starts and stops fiddling with the slider:

var sliding = false;
$("#slider_objsize").slider({
    // ...
    start: function() { $('#slider_objsize').data('sliding', true ) },
    stop:  function() { $('#slider_objsize').data('sliding', false) },
});

Then look at $('#slider_objsize').data('sliding') to see if they’re fiddling with it.

Demo: http://jsfiddle.net/ambiguous/Gn5cX/