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

Nicola Peluchetti · Accepted Answer · 2011-11-25 15:20:41Z

3

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)

answered Nov 25, 2011 at 15:20

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter J Harrison Over a year ago

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

kuba Over a year ago

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

Collectives™ on Stack Overflow

jQuery UI Slider with control buttons?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related