Opacity Slider in ListItem Panel

66
0
12-04-2021 09:57 AM
GünterLassy
New Contributor

Hi, 

I have a Slider in a LayerList Item to change the transparency of the layers. The Problem is it doesn't work smooth if you drag it, it jumps or tremble. I think it could be a problem of the height of the item in the panel. I changed it in the developer console of the browser but it didn't resolve the problem. 

I would expect a behaviour like in thsis example:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featureeffect-geometry

 

  view.when(() => {

    // Layer List -> BEGIN
    const layerList = new LayerList({
      container: document.createElement("div"),
      view: view,
      listItemCreatedFunction: function(event){
        const item = event.item;
        
        const mySlider = new Slider({
          min: 0,
          max: 100,
          steps: 1,
          values: [100],
          visibleElements: {
            labels: true,
            rangeLabels: true}
        }); //mySlider

        mySlider.on("thumb-drag", function(event){ 
        item.layer.opacity = event.value/100;
        }); // mySlider.on

        item.panel = { 
          //content: "legend",
          content: mySlider,
          className: "esri-icon-chart"
        }; // item.panel

        item.actionsSections = [
          [ {
            title: "Layer information",
            className: "esri-icon-description",
            id: "information"
          }],
          [{
            title: "Increase opacity",
            className: "esri-icon-up",
            id: "increase-opacity"
          }, {
            title: "Decrease opacity",
            className: "esri-icon-down",
            id: "decrease-opacity"
          }]
        ]; // item.actionsSections
      } // listItemCreatedFunction
    }); // LayerList

 

0 Kudos
0 Replies