Ajustes CSS do Esri Slider

ReneRubalcava

<\/HEAD>

<\/P>

Então você criou um webmap incrível. Seu webmap está arrasando e fazendo sucesso<\/EM>. Você tem algumas ferramentas personalizadas bonitas, talvez. Talvez você tenha construído uma ferramenta de busca personalizada ou uma exibição bonita dos seus dados de atributos. Mas você começa a pensar, hmm, eu gostaria de dar um tema para toda a minha aplicação<\/EM>. Talvez seja focado em alguns recursos hídricos ou faça algum tipo de análise de densidade florestal. Mas uma coisa parece igual em todos os seus mapas... seu controle deslizante de zoom.<\/P><\/P>Hmm. Não parece ruim, mas poderia ficar melhor.<\/P><\/P>As classes CSS<\/SPAN><\/H2>Existem algumas coisas que você pode fazer para personalizar o slider bem facilmente usando CSS. Não requer muito trabalho, mas pode adicionar aquele toque especial à sua aplicação.<\/P>Aqui está uma lista das classes associadas ao slider que serão úteis.<\/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>Pode parecer uma lista grande, mas você não precisa modificar todas elas, isso é apenas o que está descrito no css padrão da ArcGIS JS API. Existem ainda mais relacionadas aos deslocamentos baseados na localização do slider na página. Você pode começar a brincar com o CSS nas ferramentas de desenvolvimento do navegador, como Chrome Dev Tools<\/A>. Essa é uma maneira fácil de experimentar com sua aplicação.<\/P>

<\/P>

Brinque um pouco<\/H2>Algumas coisas legais que você pode fazer são adicionar uma sombra na caixa, remover a borda e aumentar o tamanho dos botões para dedos maiores em dispositivos móveis.<\/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>Isso acaba ficando assim.<\/P>**Dica: Se você mudar o tamanho do botão, mude o line-height para manter +/- centralizado.<\/EM><\/SPAN><\/P>Não é uma diferença enorme, bem sutil, mas diferencia sua aplicação das outras. Você pode ver essa demonstração aqui<\/A>. Ou talvez queira atualizar a cor para combinar com o tema geral da sua aplicação. Você pode ajustar o CSS assim.<\/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>Isso acaba ficando assim.<\/P> **Dica: Note como defini a borda como 0 para remover o separador entre os botões.<\/EM><\/SPAN><\/P>Você pode querer fazer algo assim se sua aplicação estiver embutida em outra aplicação e quiser tornar a experiência do usuário mais fluida. Você pode ver essa 

demonstração aqui<\/A>.<\/P>

<\/P>

Mova-o por aí<\/H2>Não esqueça que o construtor do mapa também tem opções<\/A> para mover o slider por aí. Você pode usar sliderOrientation<\STRONG> & sliderPosition<\STRONG> para mudar o slider conforme suas necessidades. Coloque-o no canto inferior esquerdo ou superior direito e horizontalmente. Brinque com isso. Você pode ver uma pequena demonstração aqui<\A>.<\P>\

Então brinque um pouco com CSS e adicione um pouco de estilo às áreas menos exploradas da sua aplicação de mapeamento. Isso pode ajudar você a construir um tema geral para seu mapa e app que o destaque um pouco.<\/P>\\