Initialize multiple jQuery sliders programatically, each with a different onChange function

Question

I'll try and keep this straightforward. I am using jQuery sliders and trying to initialize them all at once using an array:

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));



function slider (context, id, min, max, defaultvalue, changeFunc) {

    this.context = context;

    this.id = id;

    this.min = min;

    this.max = max;

    this.defaultvalue = defaultvalue;

    this.changeFunc = changeFunc;

}

Where context is the ID of its intended parent div and changeFunc is the function I want it to call on change.

My Init function loops through this array and appends the markup according to the context, and then tries to init each jquery slider like so:

$(id).slider({

      range: "min",     

      min: sliders[i].min,   

      max: sliders[i].max,

      value: sliders[i].defaultvalue,

      create: function() {

        handle.text( $( this ).slider( "value" ) );

      },

      change: function() {

          sliders[i].changeFunc();

      }

 });

The min, max, and value inits work fine, presumably since they happen exactly once, during the init, but the change function fails pretty miserably, again presumably because it's simply trying to look up sliders[i] on each change (i being a long dead iterator by that point).

My question is - how can I programatically init a bunch of jquery sliders, each with a different onChange function? Without doing them manually, that is.

EDIT: Got some great help from Ramon de Paula Marques below, though in the end I had to do it a different way altogether because I was unable to pass a value to the function. What I ended up doing, for better or worse, was creating a wrapper function that simply looked up the proper change function once called based on the id of the slider that called it.

function parcelSliderFunction(caller, value)

{

   for (var x = 0; x < sliders.length; x++)

    {

        if(sliders[x].id == caller) {

            sliders[x].callback(value);

            return;

        }

    }



    console.log("id " + caller + " not found, you done screwed up.");

    return;



}

I should probably use a dictionary for this.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

First you have to remove parentheses of the function as parameter, in this line

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));

It becomes

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange));

Then you get the change function like this (without parentheses)

$(id).slider({
      range: "min",     
      min: sliders[i].min,   
      max: sliders[i].max,
      value: sliders[i].defaultvalue,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      change: sliders[i].changeFunc
 });

OR

$(id).slider({
      range: "min",     
      min: sliders[i].min,   
      max: sliders[i].max,
      value: sliders[i].defaultvalue,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      }
 });

$( id ).on( "slidechange", function( event, ui ) {} );

Initialize multiple jQuery sliders programatically, each with a different onChange function

Sign up