Hi
I am using the VerticalSlider widget as a zoom control on a map and would like to change the buttons at the ends of the slider from arrows to +/- buttons. Is it possible to do this whilst maintaining the style of the rest of the slider widget? I looked at the incrementButton.style.display property but could not figure out how to use this (the widget is being created entirely within Javascript).
Any help is appreciated.
Change the CSS Style
The default styles for the increment and decrement icons on the vertical slider are:
background:transparent url(images/arrowDown.png) no-repeat scroll center;
cursor:pointer;
height:16px;
width:16px;
}
.dijitSliderDecrementIconV {
background:transparent url(images/arrowDown.png) no-repeat scroll center;
cursor:pointer;
height:16px;
width:16px;
}
To replace the icons you simply have to over-ride the background image for each. Put the following code inside a style tag at the top of your page or in its own CSS file:
background-image: url("http://localhost:8080/DojoBook/dojo-release-1.1.0/dijit/themes/tundra/images/plusButton.gif");
}
.tundra .dijitSliderDecrementIconV {
background-image: url("http://localhost:8080/DojoBook/dojo-release-1.1.0/dijit/themes/tundra/images/minusButton.gif");
}
I'm referencing the plus and minus icons that are already in the "tundra/images" directory but you could certainly create your own.
Notes: I am using the full URL to reference the images - this URL only works on my configuration. Your URL will be different. Also, I had problems if I used a relative URL like "images/plusButton.gif". In that case, no image appeared at all. I think that is just a problem with my understanding of how to use the url to point to the right file.
I'm using Dojo 1.1.0.
Worked great.
Thanks for the info, put this inside a CSS file and it worked perfectly. I appreciate your help.