Hello I am really in nowhere here...
I'm stuck to mootools 1.1 (Joomla)
I copy/pasted slider script on demos111.mootools.
I am trying to modify the script to quasi-automatize slider creation.
I need to create many sliders for many items. suppose 2 sliders each
items. Same sliders per item.
Knob moves should update an input field. The input field should value
update the knob positions. Depending on the user dragging the knob, or
the user filling the numeric input field.
I cannot acess the input field value from within the onchange
function. Initialization is OK. (input field displays the knob
position values). But after that, the "i" index is set to "2"
and I cannot access the right input field id since names[i] with i= 2
does nt exist....
Can somebody help plz?
window.addEvent('domready', function() {
mySlide = [0,1];
var slLength = mySlide.length;
var names = ['[59][1]','[59][2]'];
for (i=0; i<slLength ; ++i ) {
mySlide[i] = new Slider($('area'+i), $('knob'+i), {
steps: 100,
onChange: function(step){
$('criterium'+names[i]).value = step;
},
}, i).set(10);
$('knob'+i).setOpacity(0.5);
$('criterium[59][2]').addEvent('change', function(e){
new Event(e).stop();
mySlide[parseInt(this.rel)].set(parseInt(this.value));
});
}
});
<div id="consolebox59_0">
<div id="console59_0"></div><div id="console259_0"></div>
<div id="area0">
<div id="knob0"></div>
</div>
<div id="upd0">-</div>
<input type="text" id="criterium[59][2]">
</div>
<div id="consolebox59_1">
<div id="console59_1"></div><div id="console259_1"></div>
<div id="area1">
<div id="knob1"></div>
</div>
<div id="upd1">-</div>
<input type="text" id="criterium[59][1]">
</div>
