Ajustes CSS para Esri Slider

ReneRubalcava

<\/HEAD>

<\/P>

Así que hiciste un webmap impresionante. Tu webmap está arrasando y tomando nombres<\/EM>. Tal vez tienes algunas herramientas personalizadas con buen aspecto. Quizás construiste una herramienta de búsqueda personalizada o una visualización atractiva de tus datos de atributos. Pero empiezas a pensar, hmm, me gustaría darle un tema a toda mi aplicación<\/EM>. Tal vez está enfocada en algunos recursos hídricos o realiza algún tipo de análisis de densidad forestal. Pero hay algo que se ve igual en todos tus mapas... tu zoom slider.<\/P><\/P>Hmm. No se ve mal, pero podría verse mejor.<\/P><\/P>Las clases CSS<\/SPAN><\/H2>Hay algunas cosas que podrías hacer para personalizar el slider bastante fácil usando CSS. No requiere mucho trabajo, pero podría añadir ese toque especial a tu aplicación.<\/P>Así que aquí tienes una lista de las clases asociadas con el slider que te serán útiles.<\/P>.esriSimpleSlider<\/SPAN><\/LI>.esriSimpleSlider div<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderIncrementButton<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderHorizontal .esriSimpleSliderIncrementButton<\/SPAN><\/LI> .esriSimpleSliderHorizontal .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:hover,.esriSimpleSliderIncrementButton:hover<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:active,.esriSimpleSliderIncrementButton:active<\/SPAN><\/LI>.esriSimpleSliderDisabledButton,.esriSimpleSliderDisabledButton:active,.esriSimpleSliderDisabledButton:hover<\/SPAN><\/LI><\/UL><\/P>Puede parecer una lista larga, pero no necesitas modificar todas, esto es solo lo que se describe en el css por defecto del ArcGIS JS API. Hay aún más relacionadas con los desplazamientos basados en la ubicación del slider en la página. Puedes empezar a experimentar con el CSS en las herramientas de desarrollo del navegador, como Chrome Dev Tools<\/A>. Esta es una forma fácil de probar tu aplicación.<\/P>

<\/P>

Experimenta<\/H2>Un par de cosas interesantes que puedes hacer son agregar una sombra al cuadro, eliminar el borde y aumentar el tamaño de los botones para dedos gruesos en un dispositivo móvil.<\/P>.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;
}<\/PRE><\/P>Esto termina viéndose así.<\/P>**Consejo: Si cambias el tamaño del botón, cambia el line-height para mantenerlo +/- centrado.<\/EM><\/SPAN><\/P>No es una gran diferencia, bastante sutil, pero distingue tu aplicación de otras. Puedes ver esta demostración aquí<\/A>. O tal vez quieras actualizar el color para que coincida con un tema general de tu aplicación. Puedes ajustar el CSS así.<\/P>

.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*\/
}<\/PRE><\/P>Esto termina viéndose así.<\/P> **Consejo: Nota cómo puse el borde a 0 para eliminar el separador entre los botones.<\/EM><\/SPAN><\/P>Quizás quieras hacer algo así si tu aplicación está embebida en otra aplicación y quieres hacer la experiencia del usuario más fluida. Puedes ver esta 

demostración aquí<\/A>.<\/P>

<\/P>

Muévelo por ahí<\/H2>No olvides que el constructor del mapa también tiene opciones<\/A> para mover el slider por ahí. Puedes usar sliderOrientation & sliderPosition para cambiar el slider según tus necesidades. Ponlo en la esquina inferior izquierda o superior derecha y horizontal. Experimenta con ello. Puedes ver una pequeña demostración aquí<\/A>.<\/P>

Así que experimenta con algo de CSS y añade un poco de estilo a algunas de las áreas menos tocadas de tu aplicación cartográfica. Esto puede ayudarte a construir un tema general para tu mapa y app que lo diferencie un poco.