Slider to Display Image Service

MichaelGlassman2 — Mon, 15 Jul 2013 12:55:26 GMT

How would I go about creating a slider that would change the transparency of an image service. I have an orthophoto of my map extent that I want to be able to have the option to display. Any suggestions would be appreciated.

Re: Slider to Display Image Service

SteveCole — Sun, 12 Dec 2021 04:35:26 GMT

I use this on featureLayers but it basically adjusts the transparency option for the layer. It uses the dijit.form.HorizontalSlider.
The HTML I have is:

<p style="font-size:140%;margin-left: 10px">Use this slider to adjust the transparency of the Demographic Data Overlays:</p>
<div id="theOpacitySlider" dojoType="dijit.form.HorizontalSlider" name="horizontal1"
 onChange="applyOpacity"
 value="40"
 maximum="100"
 minimum="0"
 discreteValues="11"
 pageIncrement="100"
 showButtons="false"
 intermediateChanges="false"
 slideDuration="500"
 style="width:290px; height: 20px;margin-left:auto;margin-right:auto"
 id="slider1">
  <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:90%;font-weight:bold" count="6" numericMargin="0"></ol>
  <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
  <div id = "theOpacityRuler" dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=2 style="height:10px;"></div>
  <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:90%;font-style:italic">
   <li>Solid</li>
   <li>Transparent</li>
  </ol>
</div><br />
<table>
 <tr>
  <td><SPAN style="font-weight:bold">Current Transparency Setting: <input readonly id="sliderInput" size="2" value="40%" style="padding-left:5px"></SPAN></td>
 </tr>
</table>

The javascript code is:

function applyOpacity() {
 var theAmount;
  
 theAmount = arguments[0];
 theOpacity = 1 - (theAmount / 100);

 map.getLayer('your Layer ID here').setOpacity(theOpacity);
}

Be sure to also include the necessary dojo.requires:

dojo.require("dijit.form.HorizontalSlider");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dijit.form.HorizontalRule");

I also included a screenshot to give you an idea of what it looks like.

Good luck!
Steve

Re: Slider to Display Image Service

MichaelGlassman2 — Mon, 15 Jul 2013 16:42:27 GMT

This did exactly what I was looking for it to do. Thanks so much for your help.

Re: Slider to Display Image Service

SteveCole — Mon, 15 Jul 2013 17:11:57 GMT

Awesome! Glad that it helped.

topic Re: Slider to Display Image Service in ArcGIS JavaScript Maps SDK Questions

Slider to Display Image Service

Re: Slider to Display Image Service

Re: Slider to Display Image Service

Re: Slider to Display Image Service