jQuery what is the 'ui' in the following example?

Question

chrisrbailey's comment on this question:

http://stackoverflow.com/questions/621147/jquery-ui-slider-cant-slide-to-0

helped me solve that exact same issue I was having with a slider. I'd like to extend that example into another question. Could someone help me understand the difference between these two examples:

$("#slider1").slider({
  slide:  function(event,ui){$('#field1').val(ui.value)}
});

$("#slider1").slider({
  slide:  function(event,ui){$('#field1').val($(this).slider("value"))}
});

As the aforementioned question/answer indicates, ui.value and $(this).slider("value") are actually grabbing different things. I'm not used to the ui.value and was wondering if anyone had a good explanation/link to tutorial that talks more about using the 'event,ui' items in jQuery.

Answer 1

The jquery-ui documentation tells you which parameters are passed to which callback functions. Unfortunately, the documentation isn't always that great at describing what kind of data those parameters have. If you take a look at http://jqueryui.com/demos/slider/, Events tab, expand to display information about the Slide event.

This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

Return false in order to prevent a slide, based on ui.value.

Answer 2

Have you checked out the documentation?

I've put together a demo that writes out the property of each object to the screen, so you can see what each contains. It's interesting to note that ui.value and $(this).slider("value") return different values (0 and 1, respectively) when one starts to slide the slider (one slider increment leads to values 1 and 0, respectively). From that point on, they also seem to be off by one (this is on Firefox 3.5.3 for me).