CODEWITHSUNDEEP
jqueryjquery-uicontrolsscrollbarjquery-ui-slider
Peter J Harrison
Peter J Harrison

Reputation: 651

jQuery UI Slider with control buttons?

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

Upvotes: 7

Views: 9056

Answers (1)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76900

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)

Upvotes: 3

Related Questions