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);
        }
      });