Combining legend and visibility slider in to the layer list

rajriyas9

I am looking for the combination of Legend and Visibility Slider both in to the Layer List.

Code:

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function (event) {
    const item = event.item;
    item.panel = {
      content: "legend",
      open: true
    };

 const slider = new Slider({
      min: 0,
      max: 1,
      precision: 2,
      values: [ 1 ],
      visibleElements: {
        labels: true,
        rangeLabels: true
      }
    });

    item.panel = {
      content: slider,
      className: "esri-icon-sliders-horizontal",
      title: "Change layer opacity"
    };
  }
});

Is it possible? if yes, Please share the code.

UndralBatsukh

This simple codepen show how this can be done: https://codepen.io/U_B_U/pen/VwdJbBe?editors=100 and the below is the main code: 

 const itemPanelDiv = document.createElement("div");

 const sliderDiv = document.createElement("div");
 sliderDiv.classList.add("esri-widget");
 const slider = new Slider({
   min: 0,
   max: 1,
   precision: 2,
   values: [1],
   visibleElements: {
     labels: true,
     rangeLabels: true
   },
   container: sliderDiv
 });

slider.on("thumb-drag", (event) => {
  const { value } = event;
  item.layer.opacity = value;
});

const legendDiv = document.createElement("div");
legendDiv.classList.add("esri-widget");
const legend = new Legend({
  view: view,
  layerInfos: [
    {
      layer: item.layer
    }
   ],
   container: legendDiv
});
itemPanelDiv.append(sliderDiv, legendDiv);

item.panel = {
  content: itemPanelDiv,
  className: "esri-icon-collection",
  open: true, //item.visible,
  title: "title"
};