Next/Previous click jQuery UI

Question

I am trying to add next/previous buttons on a button click using the jQuery UI Slider. I found this code...

$("#down").click(function() {
  var s = $("#slider"), val = s.slider("value"), step = s.slider("option", "step");
  s.slider("value", val - step);
});

$("#up").click(function() {
  var s = $("#slider"), val = s.slider("value"), step = s.slider("option", "step");
  s.slider("value", val + step);
});

Here: http://osdir.com/ml/jquery-ui/2009-03/msg00617.html

However this only changes the value of the Slider, moving the slider handle, but it doesn't actually slide the element. Little help?

Answer 1

The code works fine as demonstrated in this Working Demo. Add /edit to the URL to see the code and play with the demo.

$(function() {

    $('#slider').slider({ change: alertValue });

    $("#down").click(function() {
      var s = $("#slider"), val = s.slider("value"), step = s.slider("option", "step");
      s.slider("value", val - step);
    });
    $("#up").click(function() {
      var s = $("#slider"), val = s.slider("value"), step = s.slider("option", "step");
      s.slider("value", val + step);
    });

});

function alertValue() {

alert("The value is : " + $("#slider").slider("value"));

}

Answer 2

Ah, the 'change:' is what I needed! The problem was I am scrolling content with the slider and changing the the value alone will not scroll the content, it only moves the handle. To make sure the next/previous works I repeated the function from $('#slider').slider({slide:]) into $('#slider').slider({change:]).

Thanks a ton!