Slider "slide" event not triggering, but "stop" event does

Slider "slide" event not triggering, but "stop" event does

I am new to jQuery and Javascript and I am trying to dynamically add some sliders which all should trigger the "slide" event. 

Parts of it are working: when i click the button, I get 5 sliders on my page. But I have the following problems:
- I get "NaN" as a tooltip when i hover over the slider.
- The slide event is not triggered, but the stop event is.

Funny thing is if I insert a slider directly into HTML (not dynamically), it works (it successfully calls a function that is not included in the code below). Additionally I get a little value field to the left of the slider as well as a tooltip indicating the current value.

  1. <input type="range" name="points" id="points" value="50" min="0" max="100" oninput="channelSlider(this.value)" onchange="channelSlider(0, this.value)"/>

Below is part of the code:

HTML:
  1. ...
  2. <body>
  3.       <div data-role="page" id="pageone">
  4.             <input type="button" value="Load" onclick="loadSliders()"/>
  5.             
  6.             <div data-role="main" id="controls">
  7.             </div>
  8.       </div>
  9. </body>

Javascript:
  1. function loadSliders()
  2.       try 
  3.       {
  4.             var outstring = "";
  5.             for (var i = 0, size = 5; i < 5; i++)
  6.             {
  7.                   outstring += "<div id=\"slider"+i+"\"></div>";
  8.             }

  9.             document.getElementById("controls").innerHTML = outstring;

  10.             for (var j = 0, size2 = 5; j < size5; j++)
  11.             { 
  12.                   makeslider(j);
  13.             } 
  14.       } 
  15.       catch (ouch) 
  16.       { 
  17.             document.getElementById("controls").innerHTML = "Error!";
  18.       }
  19. }

  20. function makeslider(index) 
  21. {
  22.       $("#slider" + index).slider({ 
  23.             min: 0,
  24.             max: 255,
  25.             step: 1, 
  26.             slide: function(event, ui) 
  27.             {
  28.                   console.log("Slide " + index + ": " + ui.value); 
  29.             } 
  30.             stop: function(event, ui) 
  31.             {
  32.                   console.log("Stop " + index + ": " + ui.value); 
  33.             } 
  34.       });
  35. }