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

[KellyHutchins]

To modify the size, location and labels for the zoom slider you can use the options in esri.config. Here's an example that modifies the location and size:

      function init() {
        //set position of slider at 10 pixels offset from right/top of map
        //set slider height to 100 pixels
        esri.config.defaults.map.slider = { right:"10px", top:"10px", width:null, height:"300px" };

For the arrows here's some css that changes the arrow image. In this case I have a sprite that contains two arrows (up and down).  The positions specified for the up and down arrow using background-position specify the location of the individual image within the sprite. If you use a tool like this one to generate the sprite it will provide you with the location coords for each of the contained images.

http://spritegen.website-performance.org/

.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV {
    background: url("../images/arrows.png") no-repeat top left;
    border: 1px solid #B5BCC7;
    border-radius: 2px 2px 2px 2px;
    font-size: 1px;
}

.claro .dijitSliderDecrementIconV {
    background-position: 0 0;
    width:16px;
    height:16px;
    border: none;
}    

  .claro .dijitSliderIncrementIconV {
    background-position: 0 -66px;
    width:16px;
    height:16px;
    border:none;
}

[QingHuang]

Thanks Kelly. That pointed me to the right direction.

To modify the size, location and labels for the zoom slider you can use the options in esri.config. Here's an example that modifies the location and size:

      function init() {
        //set position of slider at 10 pixels offset from right/top of map
        //set slider height to 100 pixels
        esri.config.defaults.map.slider = { right:"10px", top:"10px", width:null, height:"300px" };

For the arrows here's some css that changes the arrow image. In this case I have a sprite that contains two arrows (up and down).  The positions specified for the up and down arrow using background-position specify the location of the individual image within the sprite. If you use a tool like this one to generate the sprite it will provide you with the location coords for each of the contained images.

http://spritegen.website-performance.org/

.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV {
    background: url("../images/arrows.png") no-repeat top left;
    border: 1px solid #B5BCC7;
    border-radius: 2px 2px 2px 2px;
    font-size: 1px;
}

.claro .dijitSliderDecrementIconV {
    background-position: 0 0;
    width:16px;
    height:16px;
    border: none;
}    

  .claro .dijitSliderIncrementIconV {
    background-position: 0 -66px;
    width:16px;
    height:16px;
    border:none;
}

[VeenaHosur]

Cant we change icon of navigation tools

[RobertScheitlin__GISP]

Veena,

  Actually those are text and not icons:

    <div id="map_zoom_slider" class="esriSimpleSlider esriSimpleSliderVertical esriSimpleSliderTL" style="z-index: 30;"> 
        <div class="esriSimpleSliderIncrementButton" title="Zoom In"> 
            <span>+</span> 
        </div> 
        <div class="esriSimpleSliderDecrementButton" title="Zoom Out"> 
            <span>–</span> 
        </div> 
    </div> 

So you would have to manipulate the dom and replace the span elements with an image. I have never had a desire to do this so I don't have a code sample for that.

[KellyHutchins]

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' />"