How to Set Transparency on ClassBreaksRenderer Levels Using Jquery UI Slider

[BehrouzHosseini]

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);

  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[KenBuja]

You're attempting to set the opacity of a number variable (transRange1) instead of featureLayer.

[BehrouzHosseini]

Thanks for reply Ken, but by setting 

featureLayer.setOpacity(1);

will apply the opacity to entire featyrelayer which I do not mean to. What I want to do is filtering display of features based on addBreak  values and slider move 

[KenBuja]

Thanks for the clarification...I didn't scroll far enough right on your code. You should be able to change the colors in the renderer with the new opacity levels using the visualVariables property and the setVisualVariables method.

[BehrouzHosseini]

I tried to set  all points transparent on load by using

setVisualVariables

    var renderer = new TemporalRenderer(observationRenderer, null, null, null);
    renderer.setVisualVariables([{
    type: "opacityInfo",
    field: "Ht_DBH_ft",
"stops": [{
               "value": 1,
               "opacity": 0
            }, {
               "value": 2,
               "opacity": 0
            },
            {
               "value": 3,
               "opacity": 0
            },{
               "value": 4,
               "opacity": 0
            },{
               "value": 5,
               "opacity": 0
            },{
               "value": 6,
               "opacity": 0
            }]
  }]);
     
    featureLayer.setRenderer(renderer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but I am still seeing all the points on the Map!

[KenBuja]

Yes, I'm having difficulty working with the setVisualVariables using this sample, where it's not working as expected

var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

renderer.setVisualVariables([{
  "type": "opacityInfo",
  "field": "POP07_SQMI",
  "stops": [{
    "value": 25,
    "opacity ": 1
  }, {
    "value": 75,
    "opacity ": .25
  }, {
    "value": 175,
    "opacity ": 0
  }]
}]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is the output I get regardless of how I change the opacity for each stop.