Slider widget in LayerList/ListItemPanel

[BenRomlein]

Using JS API 4.16, I want to use a Slider widget in the ListItemPanel of my Layer List items, but when I attach an event listener to my slider, it fails to render.

Basically, I have:

const mySlider = new Slider({

    min: 0,

    max: 1,

    steps: .05,

    values: [1],

    snapOnClickEnabled: true,

    visibleElements: {labels: true,

                        rangeLabels: true}

  }).on('thumb-drag', index => console.log(index));

const layerList = new LayerList({

    view: view,

    listItemCreatedFunction: event => {

        const item = event.item

        item.panel = {

            content: [

                mySlider

            ],

            open: false

        }

)};

and my Slider isn't rendering.

here's a codepen: https://codepen.io/broms/pen/BaKdXaj

If you uncomment the on('thumb-drag') listener at line 14 in the pen, the slider stops rendering.

I assume the code is correct, because if you uncomment the container property at line 5 (in addition to the above) and draw the slider in its own div, everything works as expected.

Is this a bug, or is there a way to get the Slider to work inside a ListItemPanel?

[RobertScheitlin__GISP · Accepted solution]

Ben,

   Your only issue is you are trying to chain an event listener and that is incorrect.

Here is what you need:

  const mySlider = new Slider({
    // container: "sliderDiv",
    min: 0,
    max: 1,
    steps: .05,
    values: [1],
    snapOnClickEnabled: true,
    visibleElements: {labels: true,
                        rangeLabels: true}
  })
  mySlider.on('thumb-drag', index => console.log(index));‍‍‍‍‍‍‍‍‍‍‍

[BenRomlein]

Thanks for the answer, Robert. It works perfectly now.

I'll add that creating the Slider inside the listItemCreatedFunction made the code a lot more useful:

const layerList = new LayerList({

    view: view,

    listItemCreatedFunction: event => {

        const item = event.item

        const mySlider = new Slider({

            min: 0,

            max: 1,

            steps: .05,

            values: [1],

            snapOnClickEnabled: true,

            visibleElements: {labels: true,

                                rangeLabels: true}

          });

          mySlider.on("thumb-drag", event => **do things**);

Since this way it has access to the item