Reputation: 5638
I'm trying to set the value of slider in slide event. Here is my code:
$(document).ready(function () {
$("#slider").slider({
min: 0,
max: 10000,
step: 1, // Use this determine the amount of each interval
values: [0], // The default range
slide: function (event, ui) {
var slider = $("#slider").slider({
animate: true
});
slider.slider('value', 500);
}
});
});
What am I missing? I can't seem to animate and set the value of the slider.
Edit: Ok now I can set the value of the slider BUT it happens too fast. I want it to slowly go to the value I set. Here is my edited code:
$(document).ready(function () {
$("#slider").slider({
min: 0,
max: 10000,
animate: "slow",
step: 1,// Use this determine the amount of each interval
// values: [0] // The default range
change: function (event, ui) {
$("#slider").slider('value', 500);
}
});
});
How can i make it slowly move to 500 instead of setting it right away?
Thank you
Upvotes: 2
Views: 5323
Reputation: 9955
Reference:
After moving the slider button and releasing it, the slider button will animate back to a locked value.
Code:
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 10000,
// Values "fast", "normal", "slow", or duration can be used.
animate: 1500,
step: 1,
// Starting value is 500
value: 500,
animate: true,
change: function(){
// This setTimeout will allow the slider to animated correctly.
setTimeout("$('#slider').slider('value', 500);", 350);
}
});
// On page load, animate the slider to this value of 500.
$('#slider').slider('value', 500);
});
Status Update: The SO Poster required the stop:
event instead of the change:
event in the UI Slider for other specific requirements, but there is no visual difference seen when that is used.
Upvotes: 1