Esri Slider CSS Tweaks

[ReneRubalcava]

So you made a badass webmap. Your webmap is kicking butt and taking names. You've got some nice looking custom tools maybe. Maybe you built a custom search tool or a nice looking display of your attribute data. But you start to think, hmm, I'd like to give my whole application a theme. Maybe it's focused on some water resources or does some sort of forest density analysis. But one thing looks the same across all your maps... your zoom slider.

Hmm. It doesn't look bad, but it could look better.

The CSS classes

There are a few things you could do to customize the slider pretty easily using CSS. It doesn't take a whole lot of work, but it could add that little bit of flair to your application.

So here is a list of the classes associated with the slider that will come in handy.

• .esriSimpleSlider
• .esriSimpleSlider div
• .esriSimpleSliderVertical .esriSimpleSliderIncrementButton
• .esriSimpleSliderVertical .esriSimpleSliderDecrementButton
• .esriSimpleSliderHorizontal .esriSimpleSliderIncrementButton
• .esriSimpleSliderHorizontal .esriSimpleSliderDecrementButton
• .esriSimpleSliderDecrementButton:hover,.esriSimpleSliderIncrementButton:hover
• .esriSimpleSliderDecrementButton:active,.esriSimpleSliderIncrementButton:active
• .esriSimpleSliderDisabledButton,.esriSimpleSliderDisabledButton:active,.esriSimpleSliderDisabledButton:hover

That may seem like a big list, but you don't need to modify all of them, this is just what is described in the default css of the ArcGIS JS API. There are even more that have to do with the offsets based on the location of the slider on the page. You can start off playing around with the CSS in browser dev tools, like Chrome Dev Tools. This is an easy way to experiment with your application.

Play around

So a couple of neat things you can do is add a box shadow, remove the border and increase the size of the buttons for fat fingers on a mobile device.

.esriSimpleSlider {
  border: 0 solid #57585A;
  /*shadow*/
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.12), 5px 5px 5px rgba(0, 0, 0, 0.12);
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

This ends up looking like this.

**Tip: If you change the button size, change the line-height to keep +/- centered.

Not a huge difference, pretty subtle, but sets your application apart from others. You can see this demo here. Or maybe you want to update the color to match an overall theme of your application. You can adjust the CSS like this.

.esriSimpleSlider {
  border: 0 solid #57585A;
  background-color: #02a7f8;
  color: #FFF;
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
  border-bottom: 0 solid #57585A; /*setting to 0 removes the separator*/
}

This ends up looking like this.

**Tip: Note how I set the border to 0 to remove the separator between the buttons.

You may want to do something like this if your application is embedded in another application and you want to make the user experience more seamless. You can see this demo here.

Move it around

Don't forget that the map constructor also has options to move the slider around. You can use sliderOrientation & sliderPosition to change the slider to suit your needs. Put it in the bottom-left corner or upper-right and horizontal. Play around with it. You can see a small demo here.

So play around with some CSS and add a little flair to some of the lesser touched areas of your mapping application. This can help you build an overall theme to your map and app that set it aside just a bit.