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.
- <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:
- ...
- <body>
-
<div data-role="page" id="pageone">
- <input type="button" value="Load" onclick="loadSliders()"/>
-
- <div data-role="main" id="controls">
- </div>
- </div>
- </body>
Javascript:
- function loadSliders()
- {
- try
- {
- var outstring = "";
- for (var i = 0, size = 5; i < 5; i++)
- {
- outstring += "<div id=\"slider"+i+"\"></div>";
-
}
- document.getElementById("controls").innerHTML = outstring;
- for (var j = 0, size2 = 5; j < size5; j++)
- {
- makeslider(j);
- }
- }
- catch (ouch)
- {
- document.getElementById("controls").innerHTML = "Error!";
- }
- }
- function makeslider(index)
- {
- $("#slider" + index).slider({
- min: 0,
- max: 255,
- step: 1,
- slide: function(event, ui)
- {
- console.log("Slide " + index + ": " + ui.value);
- }
- stop: function(event, ui)
- {
- console.log("Stop " + index + ": " + ui.value);
- }
- });
- }