How do I set the jQuery UI Slider value programmatically and fire events?

Question

I have a slider defined like so:

$("#slider").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: totalRows,
        value: totalRows,
        slide: function(e, ui) {
          scrollTheTable(ui.value, totalRows, visibleRows, $table);
        }
      });

When using the slider, the function assigned to slide gets called no problem. I have a table that may or may not contain a row that has a class of SelectedItem. I am working on a method that will "scroll" that row to the top of the table on page load basically.

The meat of the method looks like this:

$("#slider").slider('value', $rows.length - index);

This property sets the slider value and the slider renders properly, but my slide handler is never called to do the work on the table.

What am I missing here?

Answer 1

Looks like the slide parameter is only valid for mouse events. When setting the value programmatically the change event is fired. So changing my set up to this got me what I wanted.

  $("#slider").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: totalRows,
        value: totalRows,
        slide: function(e, ui) {
          scrollTheTable(ui.value, totalRows, visibleRows, $table);
        },
        change: function(e, ui) {
          scrollTheTable(ui.value, totalRows, visibleRows, $table);
        }
      });

Answer 2

To initialize the slider, the method above with "slide: function(..." and "change: function(" works perfect. But to change the slider afterwards from outside e.g. by clicking a thumbnail or any other div with an "on-click-event" you can use:

$("#slider").slider('value', newvalue);

The essential hint for me was the slightly incorrect code line ($rows ?, PHP?):

$("#slider").slider('value', $rows.length - index);

Answer 3

I am using a slider that has 2 handles. I was able to programmatically update it with this code:

$("#slider-range").slider('values',[57,180]).change();