Slider in Layerlist - how to fix glitchy transition when dragging

Question

Hello,

I have a slider for scale visibility on one of my layers in the layer list. When the layerlist has the slider only with no legend it doesn't glitch when dragged. For some reason, the glitch starts when the legend is added. Is there any way to resolve this?

async function defineActions(event) {
  const item = event.item;
  await item.layer.when();

if (item.title === "Parcels") {
    // 1. Create the Slider specifically for Parcels
    const scaleSlider = new Slider({
      min: 0,
      max: 35000,
      values: [item.layer.minScale],
	  steps: 2000,
  	  precision: 0, 
      visibleElements: { labels: true, rangeLabels: true },
      container: document.createElement("div") // Best practice for custom panel content
    });

// 2. Set the panel to ONLY the slider
    item.panel = {
      content: scaleSlider,
      open: false,
      title: "Scale Settings"
    };

// 3. Robustly watch for slider value changes
    // To this for better performance:
scaleSlider.on("thumb-drag", (event) => {
  item.layer.minScale = event.value;
});

} else {
    // 4. Default behavior: Show legend for all other layers
    item.panel = {
      content: "legend",
      open: true
    };
  }

// 5. Add custom actions separately
  if (item.title === "Land Use Type (Assessor Use Codes)") {
    item.actionsSections = [[
      {
        title: "Toggle Labels",
        className: "esri-icon-labels",
        id: "toggle-labels",
        type: "button"
      }
    ]];
  }
}

const layerList = new LayerList({
  view: view,
  container: layersContainerDiv,
  visibilityAppearance: "checkbox",
  // Define the function directly within the constructor
  listItemCreatedFunction: defineActions,
  visible: false
});

// Listen for the action trigger
layerList.on("trigger-action", (event) => {
  const id = event.action.id;
  const layer = event.item.layer;

if (id === "toggle-labels") {
    // Toggle the labelsVisible property
    layer.labelsVisible = !layer.labelsVisible;
  }
});

view.ui.add(layersDiv, "top-right");

Sage_Wall · Answer

Hi @BrandonPrice1

I looked at this some more this morning.  Try modifying your event listener on the Slider to only respond to when the event.state === "stop".  I think this should help as the minScale will only change when the user has finished moving the slider and not continuously as its dragged.

// 3. Robustly watch for slider value changes
    // To this for better performance:
    scaleSlider.on("thumb-drag", (event) => {
      if (event.state === "stop" && item.layer) {
        item.layer.minScale = event.value;
      }
    });

Sage_Wall · Answer

My first thought is that this is the result of the Legend's respectLayerVisibility property watching the scale values as the slider changes the minScale.  I'd need to create repro app to know for sure.

You might try using a calcite-slider instead of the Slider widget.  The Calcite Slider has a calciteSliderChange event that only fires when the components handle is released and not continuously on drag as I think the Slider widget does.  Instead of creating a new Slider instance you would need to use const scaleSlider = document.createElement("calcite-slider") then set the appropriate properties.  I'm not certain this is the issue and fix but it's probably worth a try.  Another way to test this would be to create a new Legend instance instead of using the "legend" keyword and setting the layerInfos property to be the item.layer and respectLayerVisibility to false.  I can try and look at this more closely next week, it's late on a Friday 🙂