You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to use TimeSlider widget with minimal configuration. The TimeSlider widget simplifies the process of visualizing temporal data in a JavaScript application.

This application uses an instance of ImageryLayer to visualize global sea temperature at sea level on a daily basis. Since the image service has multidimensional information, you can set the multidimensionalDefinition property in the MosaicRule object to request water temperature at a specific water depth and time.

There are four different mode options when initializing the TimeSlider widget: instant, time-window, cumulative-from-start, and cumulative-from-end. In this case, the mode is set to time-window, meaning that slider will show temporal data that falls within a given time range.

// time slider widget initialization
const timeSlider = new TimeSlider({
  container: "timeSlider",
  mode: "time-window",
  view: view
view.ui.add(timeSlider, "manual");

Once the layer view has loaded, the fullTimeExtent and stops properties of the TimeSlider can be set based on the time properties of the layer.

view.whenLayerView(layer).then(function(lv) {
  const fullTimeExtent = layer.timeInfo.fullTimeExtent;

  // set up time slider properties
  timeSlider.fullTimeExtent = fullTimeExtent;
  timeSlider.stops = {
    interval: layer.timeInfo.interval

Sample search results