topic Re: Zoom slider style examples? in ArcGIS JavaScript Maps SDK Questions

Zoom slider style examples?

TracySchloss — Fri, 22 Mar 2013 14:47:16 GMT

I'm remembering there used to be a few samples for changing the styling on the zoom slider for navigating. Did I just dream this? I swear I've seen several different styles, but maybe those were removed because of the newest API version or because of the web page changes to the new resource pages. (I don't hate them as much as some people seem to, but I still can't always find what I'm looking for.)

Specifically I would like to replace the icons on the top and bottom of the slider, which are currently up and down arrows, to be plus and minus icons instead. I think I can override these symbols with a different style, but I'm not sure which style to change.

When looking at this component in Firebug, I see a style of

 .tundra .dijitSliderDecrementIconH, .tundra .dijitSliderDecrementIconV, .tundra .dijitSliderIncrementIconH, .tundra .dijitSliderIncrementIconV {
    background-image: url("images/spriteRoundedIconsSmall.png");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 14px;
    width: 14px;
}

Is this even close to what I should be messing with?

Also, does anyone have a good suggestion for where I can learn more about sprite images? I'm having a hard time grasping the concept of sprites.

Re: Zoom slider style examples?

MattDriscoll — Fri, 22 Mar 2013 21:10:39 GMT

Hi Tracy,

Here's a good article on them: http://css-tricks.com/css-sprites/
Another: http://browserdiet.com/#sprites

You could also use data-uri to base64 encode the images and put them directly in CSS if they are small.

You should be able to overwrite the styles that you see in the CSS inspector like you planned. That may be the simplest option if you just want to change the two icons. Or you could restyle the whole thing by not including the Dojo theme CSS for the slider. Which is the tougher option. I've done this with the social media template: http://www.arcgis.com/apps/SocialMedia/index.html

The small sliderStyle is much easier to restyle if you don't mind not having the slider to drag.

Re: Zoom slider style examples?

TracySchloss — Mon, 25 Mar 2013 20:37:07 GMT

I'll be messing with these for a while! That was the sort of instructions I was looking for. The documents that say "Use Sprite" as a guideline for efficiency don't seem to include how to get your graphics into the right format to use them.

I like that SpriteMe gives a lot of handholding. But I've already hit a snag in that I made a mistake and it doesn't seem to let me redo create a sprite from my same images a 2nd time. Maybe it will clear itself overnight and I can start over tomorrow.