Opacity Slider in ListItem Panel

GünterLassy — Sat, 04 Dec 2021 17:57:48 GMT

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

topic Opacity Slider in ListItem Panel in ArcGIS JavaScript Maps SDK Questions

Opacity Slider in ListItem Panel