Customize the Zoom In, Zoom out button of zoom slider by changing CSS

QingHuang

Hi,

i'm trying to modify the zoom buttons in zoom slider. After i did some search, i found they were associated with .claro .dijitSliderDecrementIconV and .claro .dijitSliderIncrementIconV in CSS. So i tried to use:

     .dijitSliderIncrementIconV, .dijitSliderDecrementIconV
      {
           background-image: url('../Images/plus.png');      
       }
This doesn't seem to work.

but when i try 
    .dijitSliderIncrementIconV, .dijitSliderDecrementIconV
      {
           display: none;     
       }
the two zoom buttons do disappear.

i'm pretty sure i configured the image path correctly. And also when i try to change other attributes such as height, width. i don't see any changes either. Does anyone know how to fix this problem?

Thanks
Qing

khutchins

Here's an example showing the approach Robert Scheitlin​ mentioned. This code uses dojo/query to find the span then adds an img.  See the attached zip for a full working example.

        query(".esriSimpleSliderIncrementButton span")[0].innerHTML = "<img src='plus.png' class='slider-icons'/>"
        query(".esriSimpleSliderDecrementButton span")[0].innerHTML = "<img src='minus.png' class='slider-icons' />"

Archive.zip