Q:

Call external function inside jQuery plugin

I am writing a simple Range Slider Plugin with Left and Right Button. 
I am using jQuery ui slider for this. 
So on slide or on click i want to call a external function inside the plugin. 
Plugin Code :
(function($) {
    $.fn.rangeSliders = function(customText){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               calculate(ui.value);
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            //calculate(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            calculate(s.slider('value'));
        });
    }
}(jQuery));

Using the Plugin inside my html
<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders();

I am getting error saying calculate is not defined. 
Can you any one suggest me a nice way to get this value or call external function inside the plugin. 

A:

You can add a new parameter to the plugin:
(function($) {
    $.fn.rangeSliders = function(customText, myCalc){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               if($.isFunction(myCalc))
                   myCalc(s.slider('value'));
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
        });
    }
}(jQuery));

now you can change your page like this:
<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders(undefined, calculate);

note that I pass undefined as the first parameter for customText so it is still being handled as if you called it as $('$slider1').rangeSliders();, but still leaves you the chance to put in a custom text.  The calculate function is being passed as the second parameter.  Be aware to pass it with the NAME ONLY, do not add the () at the end.