esriSimpleSlider opacity

Question

How do I set the opacity on the esriSimpleSlider

I've tried:

.esriSimpleSlider div
{
    height: 40px !important;
    width: 60px !important;
    color: Black;
     filter: alpha(opacity=50, style=0);
    -moz-opacity: 50%; 
    opacity: 0.5;   
    padding-top: 10px;
}

This does lighten my black to gray (so its doing something), but does not allow me to see throught the background of the slider to map underneath.    I seems I need another div or something to target to a adjust it further, but don't know the ID of that tag.

Anonymous User · Answer

If the id for your map div is "mapDiv", then the following alternatives should have worked:
   #mapDiv_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }

or in the onLoad callback:
dojo.style(dojo.byId("mapDiv_zoom_slider"), "opacity", "0.5");

Basically, the map div's ID is being used as the initial prefix for the slider's ID.

In Firefox with the Firebug extension, or in Google Chrome, you can usually right-click on an object in the page and "Inspect" an element - this helps identify properties of HTML elements (such as an ID).

GregoryDillon · Answer

You could try either adding a style for the element with the map_zoom_slider id:
   #map_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }

Or...add the dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5"); code inside of the "onLoad" callback for the map object (say around line 59 in the original sample).

Okay I finally figured this out.   You really want to take note of this!

The map DIV tag MUST have an id="map",  I had mine set to "mapDiv" which worked fine in conjunction with "map = new esri.Map("mapDiv", { logo: false });" statement, but will not allow you to style "map_zoom_slider".   Once I changed the id to "map" and change to javascript statement to "map = new esri.Map("map", { logo: false });" I was good.

This should probably be documented somewhere in the API.

Anonymous User · Answer

You could try either adding a style for the element with the map_zoom_slider id:
   #map_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }

Or...add the dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5"); code inside of the "onLoad" callback for the map object (say around line 59 in the original sample).