Slider help

[Kristian Børve]

Hi!

I have dynamically made multiple sliders with script.aculo.us. But i cant figure out how to refer to the individual slider id or name in the onSlide and onChange function. Here is my code:

for (var n=17; n>0; n--) {

                        var newSlider = document.createElement('div');

                        var sliderIdName = 'slide'+n;

                        newSlider.setAttribute('id',sliderIdName);

                        newSlider.className = "slider";

                        slider_div.appendChild(newSlider);

                        var nd = document.createElement('div');

                        nd.className = "handle";

                        newSlider.appendChild(nd);

                        (function() {

                            var time_slider = $(sliderIdName);

                            new Control.Slider(time_slider.down('.handle'), time_slider, {

                                range: $R(0, 30),

                                sliderValue: 0,

                                increment: 12,

                                values: arr,

                                //alignY: -5,

                                onSlide: function(value) {

                                    //something

                                    

                                    document.getElementById("slider_name_text_X").innerHTML = sliderIdName + "-" + value + "<br>";

                                },

                                onChange: function(value) { 

                                    //something

                                }

                            });

                        })();

                    }

So im have a text element ("slider_name_text_X") next to every slider (X) telling the slider value. So i want all of these text elements to be connected to each individual slider. I hope u understand my problem and can help, that would be appreciated very much.

Thx anyway,

BR Kristian :)

[Jason Westbrook]

So the second parameter sent to the onSlide callback is the Slider object

so if you define the onSlide callback like this

onSlide : function(value,slider) {

     //slider refers to the slider control

}

from what I understand it looks like you are putting an input element next to the slider so you should be able to use the track element of the slider and go to the next sibling

ie

slider.track.next() 

I put together a jsfiddle for you - I didnt have your css and html so I used the example from the scripty site - but you should be able to figure it out

http://jsfiddle.net/vgmouey2/2/

technically as soon as you have the track element you can do whatever you need - I put a data-* attribute on the track element to tell the callback what element I would be updating - I hope this helps you

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email to prototype-scripta...@googlegroups.com.
To post to this group, send email to prototype-s...@googlegroups.com.
Visit this group at http://groups.google.com/group/prototype-scriptaculous.
For more options, visit https://groups.google.com/d/optout.