AnsweredAssumed Answered

How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

Question asked by behClevest on May 10, 2018
Latest reply on May 10, 2018 by kenbuja

I am trying to apply opacity to  Breaks of ClassBreaksRenderer based on jQuery UI Slider and I used the 

transRange1.setOpacity(1)

for setting this but I am getting this error

 

sandbox.html:57 Uncaught TypeError: transRange1.setOpacity is not a function

Can you please let me know how to fix this?

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/renderers/ClassBreaksRenderer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/Color",
     "esri/renderers/TemporalRenderer",
    "dojo/domReady!"
  ],
  function(
    Map,
     FeatureLayer,
     ClassBreaksRenderer,
     SimpleMarkerSymbol,
     SimpleLineSymbol,
     SimpleFillSymbol,
     Color,
     TemporalRenderer
  ) {

    var map = new Map("map", {
      basemap: "topo",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",{
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: [ "*" ]  
    });
   
    var transRange1 = 0;
    var transRange2 = 0;
   
     var observationRenderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "Ht_DBH_ft");
          observationRenderer.addBreak(3, 6, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([55,0,55])),new Color([55,0,55,transRange1])));

          observationRenderer.addBreak(0, 3, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([65,105,225])),new Color([65,105,225,transRange2])));

         var renderer = new TemporalRenderer(observationRenderer, null, null, null);
          featureLayer.setRenderer(renderer);
    $( "#slider-range" ).slider({
      min: 1,
      max: 6,
      step: .0001,
      value: 3 ,
      slide: function( event, ui ) {
      $( "#range" ).val(  ui.value );

       if(ui.value > 1 && ui.value < 3 ){
         transRange1 = 1;
         transRange2 =0;
               transRange1.setOpacity(1)
       }
      if(ui.value > 4 && ui.value < 6 ){
         transRange2 = 1
         transRange1 =0;
       }
      }
    });
    $( "#range" ).val(  $( "#slider-range" ).slider( "value" ) );

    map.addLayer(featureLayer);

  });

Outcomes