Set a global variable inside jquery-ui slider? - jquery-ui

Question

I want the to prevent slider animation during page refresh, but allow it during the operation of my program.
I'm almost there:
// Initialise var animate as false
var animate = false;
// Jquery UI
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
// var animate set to false on load, so no animation from this guy:
animate: animate,
// var animate now set to true to allow animation every time slider is changed from now on:
var animate = true;
slide: function (event, ui) {
console.log("slider is moving!");
};
},
});
}
// Initialise slider
slider(0, 200, 0.01);
However, the code on line 13 that turns var animate to true is regarded and syntactically incorrect by jquery UI, so how can I change the variable "animate"?
I'm also still a little shaky with javascript's scope. If jquery UI did accept my variable change, would my logic work? I'm assuming it would because var animate is first declared in the global scope, but please correct me if I'm wrong!

Answer 1

You would want to change the value of animate after the initialization of the slider:
...
slider(0, 200, 0.01);
animate = true;
...
Also, after a variable is defined, you do not need to use the var keyword to access it.
Update After looking at the API documentation you can use the setter method to set the animate property after initialization. Try this:
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
animate: false,
slide: function (event, ui) {
console.log("slider is moving!");
}
});
}
// Initialise slider
slider(0, 200, 0.01);
$(target_slider).slider('option', 'animate', 'fast');