Slider widget in LayerList/ListItemPanel

1533
2
Jump to solution
09-01-2020 10:46 AM
BenRomlein
Occasional Contributor

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor

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