jQuery UI Slider with control buttons?

Question

I'm trying to add control buttons on to the jQuery UI slider but can't get it to work.

Can anyone see what im 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 get updated but when you click the #down link nothing happens to the scrollbar. I would like it to move up one step when the #down link is clicked.

Thanks Pete

Jecho

Answer 1

You should do:

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 error was in getting the step. You must use

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

fiddle here http://jsfiddle.net/nrNX8/ (with a step at 1 it moves very slooooooowly)

Archidiaconal

Is there a way to modify it to keep scrolling if the mousebutton is held down? – Jecho

It seems that in yours example slide event is not firing up using #down – Satiny