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?

[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?

[KellyHutchins]

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

     .esriSimpleSlider  {
        top:90%;
      }

[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.

[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.

[KellyHutchins]

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]

This doesn't work on our end at all.

[KellyHutchins]

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

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

[KentuckyDGI]

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

[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