How do I set the jQuery UI Slider value programatically 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

Why don't you call this after you set the value?

scrollTheTable($rows.length - index, totalRows, visibleRows, $table);

Answer 2

Did you try to manually fire it?

$("#slider").trigger("slide");

Answer 3

Looks like the slide parameter is only valid for mouse events. When setting the value pro grammatically 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 4

See this answer for a possible solution (link)