topic Re: Slider in Layerlist - how to fix glitchy transition when dragging in ArcGIS JavaScript Maps SDK Questions

Slider in Layerlist - how to fix glitchy transition when dragging

BrandonPrice1 — Fri, 01 May 2026 20:18:36 GMT

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

Re: Slider in Layerlist - how to fix glitchy transition when dragging

Sage_Wall — Fri, 01 May 2026 22:16:13 GMT

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 🙂

Re: Slider in Layerlist - how to fix glitchy transition when dragging

Sage_Wall — Mon, 04 May 2026 15:09:23 GMT

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