topic Re: How to customize default map slider for compact build? in ArcGIS JavaScript Maps SDK Questions

How to customize default map slider for compact build?

SteveClarke — Wed, 18 Apr 2012 15:37:16 GMT

I want to customize the default map slider that comes with the JSAPI Compact Build but I can't seem to find any information on this. I've tried using esri.config.defaults.map.slider but the only thing I can do with this is to set the width which only turns the slider horizontal. What I'm looking to do is to physically change its position on the map. I have a toolbar across the top of my map and some users are finding it difficult to tap the + to zoom in on the map with mobile devices because the slider is too close to the toolbar and they inadvertently tap a button on the toolbar instead. So I would like to move the slider down some so it's not so close to the toolbar. How do I do this?

Re: How to customize default map slider for compact build?

HemingZhu — Wed, 18 Apr 2012 17:07:01 GMT

I want to customize the default map slider that comes with the JSAPI Compact Build but I can't seem to find any information on this. I've tried using esri.config.defaults.map.slider but the only thing I can do with this is to set the width which only turns the slider horizontal. What I'm looking to do is to physically change its position on the map. I have a toolbar across the top of my map and some users are finding it difficult to tap the + to zoom in on the map with mobile devices because the slider is too close to the toolbar and they inadvertently tap a button on the toolbar instead. So I would like to move the slider down some so it's not so close to the toolbar. How do I do this?

Have you thought about developing you own dojo.form.slider and tied slider value, minimn, maxium to zoom levels?

Re: How to customize default map slider for compact build?

KellyHutchins — Sat, 11 Dec 2021 16:20:04 GMT

You can position the slider at the bottom of the map using the following css:

     .esriSimpleSlider  {
        top:90%;
      }

Re: How to customize default map slider for compact build?

SteveClarke — Sat, 11 Dec 2021 16:20:06 GMT

You can position the slider at the bottom of the map using the following css:
     .esriSimpleSlider  {
        top:90%;
      }

Thanks! That's exactly what I needed.

Re: How to customize default map slider for compact build?

KentuckyDGI — Fri, 17 Aug 2012 18:26:16 GMT

What if you want to move the compact map slider to the right hand side of the map? I've tried using some pixel values and percentages from the right and top but have had no luck.

Re: How to customize default map slider for compact build?

KellyHutchins — Sat, 11 Dec 2021 16:20:09 GMT

Try specifying it from the left and top. So if I want my slider to display in the top right corner I might do the following:

.esriSimpleSlider {
    left: 95%;
    top: 10px;
}

Re: How to customize default map slider for compact build?

KentuckyDGI — Mon, 20 Aug 2012 14:07:58 GMT

This doesn't work on our end at all.

Re: How to customize default map slider for compact build?

KellyHutchins — Sat, 11 Dec 2021 16:20:11 GMT

You may have to add the !important declaration at the end:

    .esriSimpleSlider{
        left:90% !important;
        top:15% !important;
      }

Re: How to customize default map slider for compact build?

KentuckyDGI — Mon, 27 Aug 2012 16:08:03 GMT

Thanks. That does work!
However, you cannot utilize a "right" value or it breaks . . .

Re: How to customize default map slider for compact build?

JohnGravois — Mon, 27 Aug 2012 16:27:38 GMT

because the CSS for the simple slider already has a "left" and "top" tag declared, its easier to manipulate them using important tags like in Kelly's examples than to use a "right" tag.

to see whats already in the CSS for the simpleSlider, you can use developer tools in the browser to check the source of jsapi.css