nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to customize default map slider for compact build?

SteveClarke

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?

Vind meer berichten getagd met

Accepted answers

All comments

JohnGravois

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

KentuckyDGI

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

khutchins

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

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

KentuckyDGI

This doesn't work on our end at all.

khutchins

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;
}

KentuckyDGI

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.

SteveClarke

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.

khutchins

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

     .esriSimpleSlider  {
        top:90%;
      }

HemingZhu

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?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Inloggen
Registreren

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.