topic How to make Slider listen to thumb-change in ArcGIS JavaScript Maps SDK Questions

How to make Slider listen to thumb-change

Gianna_BBSRC — Tue, 24 Mar 2020 11:36:55 GMT

Hi everyone,

I'm a bit of noob at this js stuff. I have a multi-dimensional mosaic dataset (netCDFs) with two dimensions: year and fma.

year spans from 2005 to 2100
fma spans 1 to 11 (these correspond to different scenarios)

What I would like to learn how to do is to make the Slider (aka rangeSlider) listen and change the data displayed when a user changes the slider value on the right (1-11).

See my jsfiddle here

Any help is massively appreciated.

Re: How to make Slider listen to thumb-change

AnneFitz — Sun, 12 Dec 2021 07:19:05 GMT

Hi Gianna,

It looks like you're doing it right in your code, the issue is that the function you are trying to call when the slider thumb value changes (updateFMA(event.value)) is undefined.

Try this and see if you get the event value to print in the console.

slider.on(['thumb-change', 'thumb-drag'], function(event) {
   console.log(event.value);
});‍‍‍‍‍‍

Hope this helps!

Re: How to make Slider listen to thumb-change

Gianna_BBSRC — Tue, 24 Mar 2020 16:27:08 GMT

Hi Anne,

Thanks for that. Cool to see that something is happening. It does print the slider value to the console when I thumb-change/thumb-drag.
So now how do I make the data change when I change the slider?

Thanks for your help!

Re: How to make Slider listen to thumb-change

AnneFitz — Wed, 25 Mar 2020 21:30:17 GMT

Hi Gianna - your layer isn't loading correctly for me so I don't know what your data looks like, but I think you would need to create some sort of function that would update the mosaicRule on your ImageryLayer based on the fmaValue.

This sample might help you understand: ArcGIS API for JavaScript Sandbox - Image Coordinate System

On line 80 - whenever the select box value changes, a function is called that updates the mosaicRule on the ImageryLayer. I think you can implement something similar when the slider value changes in your code.

Re: How to make Slider listen to thumb-change

Gianna_BBSRC — Sun, 12 Dec 2021 07:19:08 GMT

Hi Anne,

I'm sorry my layer isn't loading - how frustrating. You may be able to see it if you go to Woodland Expansion. Please let me know if you do.

I feel as if I'm getting closer to solving my problem, though I'm still missing something. I tried adding a function to update the multidimensionalDefinition of my mosaicRule but there's still a disconnect somewhere. I feel daft...

I updated my jsfiddle

slider.on(['thumb-change', 'thumb-drag'], function(event) {
     updateDimDef(event.value);
});

function updateDimDef(value) {
     const mosaicRuleClone = mosaicRule.clone(); // makes clone of mosaicRule
     mosaicRuleClone.multidimensionalDefinition.values = [(value)]; // redefines multiDim value to slider value? 
     layer.mosaicRule = mosaicRuleClone; // assigns mosaicRule to layer again
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks again for your help. Truly grateful!

Re: How to make Slider listen to thumb-change

AnneFitz — Sun, 12 Dec 2021 07:19:11 GMT

Hi Gianna - I still only see the topo basemap in both the link you sent and in the jsfiddle, and there's errors about the layer not loading in the console:

[esri.layers.ImageryLayer] #load() Failed to load layer (title: 'WdlndExp netcdf', id: '17119272bda-layer-0') ‍
   name: "request:server"
   message: "Failed to fetch"‍‍‍

But I think in your function you want to access the first object in the multidimensionalDefinition array, and set the value on that.

mosaicRuleClone.multidimensionalDefinition[0].values = [value];‍

Re: How to make Slider listen to thumb-change

Gianna_BBSRC — Fri, 27 Mar 2020 08:28:23 GMT

Hi Anne,

That's it! I was missing the point that it was an array.

I'll have to speak with our DB manager about the layer not loading, but thank you soo much for helping me with this one. It's been a struggle.

All the best,

Gianna