I've got a UI Slider in a site that allows the user to set one of a number of values that are then calculated through the JS script. I've created the function 'calculate' for this. 

I would like 'calculate' to occur on the slide event, so the product of the calculation changes on screen as the user moves the slider.

I thought this might relate to the order in which I call the scripts, but in the console it looks like the 'calculate' function is simply not happening, which makes me think the problem lies in the .slide code. 'Calculate' does work when I call it elsewhere in the program.

The main.js file contains:

2. $(document).ready( function() {
3.     $('#simpslider2').slider({
4.       min: 0,
5.       max: 100,
6.       value: 25,
7.       step: 1,
8.       slide: function( event, ui ) {
9.         $( "#simpvalue2" ).val( ui.value );
10.         calculate();
11.       }
12.     });
13. //    $( "#simpvalue2" ).val( $( "#simpslider2" ).slider( "value" ));
14. });

The calculate code is:

2. function calculate(){
3.     console.log('I am here!!')
4.     var amount = parseInt($("#amount2").val(), 10);
5.         var f = $("#finrtn2").val();
6.         var finRtn = (f/100)
7.         var c = $("#cost2").val();
8.         var cost = (c/100)
9.         var duration = parseInt($("#duration2").val(), 10);
10.         var yearsPerGrant = parseInt($("#yearspergrant2").val(), 10);
11.         var simp = parseInt($("#simpvalue2").val(), 10);
12.         var netRtn = (finRtn - cost);
13.         var temp = (1 + netRtn);
14.         var totalInvSize = amount * Math.pow(temp, duration);
15.         var socImpGrant = (((amount * (Math.pow(temp, yearsPerGrant))) - amount) * (duration / yearsPerGrant) + amount);
16.         var socImpInv = (amount * (simp/100));
17.         var socialImpactPA = (socImpGrant + socImpInv);
18.         $("#result2").html(socialImpactPA.toFixed(0));

And the html is:

2. <div class="form-group">
3.               <label class="control-label col-md-1" for="simpvalue2">SIMP</label> 
4.               <span class="col-md-1"></span>
5.               <span class="badge col-md-1" data-toggle="modal" data-target="#myModal">?</span>
6.               <span class="col-md-1"></span>
7.               <script language="javascript" type="text/javascript" src="jquery-1.11.2.js"></script>
8.               <script type= "text/javascript"src="calculate2.js"></script>
9.               <div class="col-md-6" id="simpslider2" >
10.                 </div>
11.                 <div class="col-md-0.6"></div>
12.                 <input class="col-md-1" id="simpvalue2" type="text" readonly style="border:0; color:#f6931f; font-weight:bold; font-size: 1.2em; background-color:C0FFED"></input>
13.                 <br>
14.                 <br>
15.                 <input class="btn btn-default" type="button" id="calculate2" value="Calculate" />
16.                 <input class="btn btn-default" type="button" id="refresh2" value="Reset" />
17.               </div>
18.              <br>       
19.              <div class="well">The social impact of this investment is:
20.               <font size="32"><div id="result2"></div></font>
21.              </div>
22.             </div>

I'd be really grateful if anyone is able to advise!

Thanks

Polly