JQuery UI Slider with control buttons?

Question

I am trying to add control buttons to the jQuery UI slider but cannot make it work.

Can anyone see what I'm doing wrong here:

$(function() { var gmin = 1; var gmax = 500; $( "#slider" ).slider({ value:5, min: gmin, max: gmax, step: 1, slide: function( event, ui ) { $( "#donate_amount_label span" ).html( "£" + ui.value ); } }); $( "#donate_amount_label span" ).html( "£" + $( "#slider" ).slider( "value" ) ); $( "#" ).val( $( "#slider" ).slider( "value" ) ); $('#down').click(function() { var s = $("#slider"); s.slider('value', s.slider('value') + s.slider( "step" ) ); }); }); 

The slider works fine and the values ​​are updated, but when you click the #down link, nothing happens with the scroll bar. I would like it to go one step further by clicking on the #down link.

Thanks Pete

Answer 1

You should:

 var s = $( "#slider" ).slider({ value:5, min: gmin, max: gmax, step: 1, slide: function( event, ui ) { $( "#donate_amount_label span" ).html( "£" + ui.value ); } }); $('#down').click(function() { s.slider('value', s.slider('value') + s.slider( "option", "step" ) ); }); 

the mistake was getting the step. You have to use

  s.slider( "option", "step" ) 

the fiddle is here http://jsfiddle.net/nrNX8/ (with a step of 1 it moves very low)