topic Re: Slider widget in LayerList/ListItemPanel in ArcGIS JavaScript Maps SDK Questions

Slider widget in LayerList/ListItemPanel

BenRomlein — Tue, 01 Sep 2020 17:46:37 GMT

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?

Re: Slider widget in LayerList/ListItemPanel

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:40:03 GMT

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