Question

Using the second answer to this question I wrote a code for a 4 handle jquery slider. It was working fine but then I had to make multiple sliders in the same page, so I tried to module my code a bit, separating the slide function. Now the handlers in a slider overlap completely ignoring the condition I set for that case.

Here is the code for my slide function and how I call it in the slider settings:

Slide function:

function slidegen(event,ui,index){

    //Code for handler 0
    if(ui.handle == $("#weightage_slider_"+index+"_0").get(0)){
        if(ui.values[0] >= ui.values[1]){

            /*FOR SOME REASON THE NEXT LINE HAS NO EFFECT*/

            $("#weightage_slider_"+index).slider('values', 0, ui.values[1]); 
            return false;
        } else {
            // handle-0 will move
            // update display of colored handle ranges
            $("#weightage_slider_a_"+index).css('left', '0%');
            $("#weightage_slider_a_"+index).css('width', (to100(ui.values[0])+'%'));
            $("#weightage_slider_b_"+index).css('left', (to100(ui.values[0])+'%'));
            $("#weightage_slider_b_"+index).css('width', ((to100(ui.values[1])-to100(ui.values[0]))+'%'));
        }
    }

    /*SIMILAR CODE FOR THE REST OF THE HANDLERS HERE*/
}

Slider settings:

$("#weightage_slider_0").slider({ 
    min: 1,
    max: 5,
    step: 0.01,
    values: handlers, // set four handles
    slide: function(event, ui) {
        slidegen(event,ui,0);
    }, 
    change: function(event, ui) {    
        changen(event,ui,0);
    }
});

I understand that during a slide, the following sequence occurs: (i) change ui.value (ii) call slider function (iii) move the slider handle. Could it be that the bug happens because I’m making another call inside the slider function, therefore I’m altering that sequence?

Answer 1

Problem solved! It seems you can’t module the functions you are going to use as settings. I assume it has to be with scope issues. Instead I module the whole slider creation as you can see below or in this link

function makeslider(index,h) {
        $("#weightage_slider_" + index).slider({
            min: 1,
            max: 5,
            step: 0.01,
            values: h,
            // set four handles
            slide: function(event, ui) {
                /*Generic slide function code here*/
            },
            change: function(event, ui) {
                /*Generic change function code here*/
            }, 
            create: function(event, ui) {
                /*Generic create function code here*/
            }    
        });
}

makeslider(0, handlers);
makeslider(1, handlers1);
makeslider(2, handlers2);