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
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)