Binding class methods as callbacks to a jquery slider UI component
<p>Referring to the code below, I have a class method that returns a list of objects specifying the behavior of a slider control, as well as the oject method that should be used as a call back when the slider is adjusted to adjust the appropriate values. The is an object to specify the binding and parameters for the following controls: Pre Gain, Distortion, and Post Gain.</p>

<pre><code>DistortionPedal.prototype.getControlBindings = function(){
    return new Array({
            name: "Pre Gain",
            min: 0,
            max: 1,
            defaultValue: 0.2,
            inc: 0.05,
            setMethod: this.setPreGain.bind(this)
        }, {
            name: "Distortion",
            min: 0,
            max: 1,
            defaultValue: 0.95,
            inc: 0.05,
            setMethod: this.changeDistortion.bind(this)
        }, {
            name: "Post Gain",
            min: 0,
            max: 1,
            defaultValue: 0.5,
            inc: 0.05,
            setMethod: this.setPostGain.bind(this)
        }
    );
};
</code></pre>

<p>I then have the following code that uses those control definitions to build the slider component.</p>

<pre><code>//var pedal instantiated earlier as a DistortionPedal object
var pedalControls = pedal.getControlBindings()
for(var x = 0; x &lt; pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    var control = pedalControls[x];

     $("#" + id ).append(control.name + "&lt;div id = '" + controlId + "'&gt;&lt;/div&gt;");
     $("#" + controlId).slider({
        range: "min",
        min: control.min,
        max: control.max,
        step: control.inc,
        value: control.defaultValue,
        slide: function( event, ui ) {
            control.setMethod(ui.value); //this is where things get strange
        }
    });
}
</code></pre>

<p>As you can see, it creates the slider and sets the various params. The issues is that all sliders end up calling setPostGain as the callback function, even though only one of the controls (the last in the list) has that callback method. Any idea on what is going on?</p>

<p><strong>Update</strong>
Based on provided answer, the updated code is:</p>

<pre><code>for(var x = 0; x &lt; pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    (function(control){
         $("#" + id ).append(control.name + "&lt;div id = '" + controlId + "'&gt;&lt;/div&gt;");
         $("#" + controlId).slider({
            range: "min",
            min: control.min,
            max: control.max,
            step: control.inc,
            value: control.defaultValue,
            slide: function( event, ui ) {
                control.setMethod(ui.value);
            }
        });
    })(pedalControls[x]);
}
</code></pre>
