jQuery UI Slider with control buttons?

Peter J Harrison picture Peter J Harrison · Nov 25, 2011 · Viewed 8.5k times · Source

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

Answer

Nicola Peluchetti picture Nicola Peluchetti · Nov 25, 2011

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)