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
