How to make Slider listen to thumb-change

[Gianna_BBSRC]

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. 

[AnneFitz]

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! 

[Gianna_BBSRC]

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!

[AnneFitz]

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.

[Gianna_BBSRC]

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!

[AnneFitz · Accepted solution]

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

[Gianna_BBSRC]

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