Slider Control Mouse Events

Suite and Optimus Suite 5
#1

Hello,

I’m new to Javascript and using the slider control. How do I change the selector image on various mouse events?
Also, I’ve customized the look of the slider and made the selector size wider than the bar. Now need to center it over the bar. How can I do that?

Thanks

#2

OK, so I figured out how to center the selector over the bar. I added the “top” property with value of -8px to the selector in dhtmlxslider.css file. In my case skin I mofidied is for skyblue.

.dhtmlxSlider_dhx_skyblue .selector {

position:absolute;
overflow:hidden;
height:65px;
width:65px;
left:0px;
top:-8px;
}

…now for the mouse events… anybody out there?

#3

You may get selector object by drag property of the slider:

var selector = slider.drag;

selector.onmouseover = function(){
selector.style.backgroundImage = “url(images/someImage.gif)”;
}

#4

Hello,

Thanks for the reply. I’m not sure where to place the suggested code.

In file dhtmlxslider.js, I tried inserting the line, this.drag.style.backgroundImage = “url(c:\001.gif)”; for the mousedown event but it didn’t work.

dhtmlxSlider.prototype._MouseDown=function(e){
…
switch ( nod._etype) {
…
case “drag”:
this.drag.style.backgroundImage = “url(c:\001.gif)”;
that.startDrag(e||event);
…

I need to change image for mousedown mouseover and mouseup. mouseup will have the original image.

Anyway i can get a modified .js file and I can put in the paths?

I"m really new to this!

Thanks so much

#5

OK, figured it out.

I tested the following code in 01_slider_init.html file it worked:

#6

BTW, thanks for all the help. This slider control is awesome! :slight_smile: