CODEWITHSUNDEEP
jqueryjquery-ui
NotMyself
NotMyself

Reputation: 30037

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

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?

Upvotes: 15

Views: 40938

Answers (5)

NotMyself
NotMyself

Reputation: 30037

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

Upvotes: 22

Alex W
Alex W

Reputation: 38173

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

Upvotes: 1

Michal - wereda-net
Michal - wereda-net

Reputation: 959

as stated in api of jquery: using slider('value', X) will call built in change function. so a suggestion is to not use slide callback.

Upvotes: 0

Peppermint81
Peppermint81

Reputation: 61

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

Upvotes: 6

Daniel A. White
Daniel A. White

Reputation: 190907

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

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

Upvotes: 0

Related Questions