TimeSliderViewModel

// Add a TimeSlider widget to the top left corner of the view.
var timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    view: view,
    mode: "instant",
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: {
      start: new Date(2000, 0, 1)
    }
  }
});
view.ui.add(timeSlider, "top-left");

Property Overview

Property Details

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

effectiveStops Date[]readonly

Defined specific locations on the timeline that the handles will snap to when manipulated.

Default Value:null

Example:

// Add yearly stops starting from the beginning of 2001.
var timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    fullTimeExtent: {
      start: new Date(2000, 5, 1),
      end: new Date(2010, 0, 1)
    },
    stops: {
      interval: {
        value: 1,
        unit: "years"
      },
      timeExtent: {
        start: new Date(2001, 0, 1),
        end: new Date(2010, 0, 1)
      }
    }
  }
});
timeSlider.viewModel.effectiveStops.forEach((stop) => {
  console.log(stop);
});

fullTimeExtent TimeExtentautocast

The temporal extent of the entire slider. It defines the entire time period within which you can visualize your time aware data using the time slider widget.

Example:

// Create a new TimeSlider with set dates
var timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    view: view
  }
});

// wait for the time-aware layer to load
layer.when(function() {
  // set up time slider properties based on layer timeInfo
  timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
  timeSlider.stops = {
    interval: layer.timeInfo.interval
    timeExtent: timeSlider.fullTimeExtent
  };
});

loop Boolean

If animating, the time indicator(s) will restart if they reach the edge.

Default Value:false

Example:

// Start a time slider animation that advances every second and restarts when it reaches the end.
var timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    loop: true,
    playRate: 1000
  }
});
timeSlider.viewModel.play();

mode String

The time slider mode. This property is used for defining if the temporal data will be displayed cumulatively up to a point in time, a single instant in time, or within a time range. See the following table for possible values.

Possible Values	Description	Example
instant	The slider will show temporal data that falls on a single instance in time. Set the values property to an array with one date.
time-window	The slider will show temporal data that falls within a given time range. This is the default. Set values property to an array with two dates.
cumulative-from-start	Similar to time-window with the start time is always pinned to the start of the slider. Set the values property to have one date, which is the end date.
cumulative-from-end	Also, similar to the time-window with the end time pinned to the end of the slider. Set the values property to have one date, which is the start date.

Possible Values:"instant"|"time-window"|"cumulative-from-start"|"cumulative-from-end"

Default Value:time-window

Example:

// Create a single thumbed time slider that includes all historic content.
var timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    view: view,
    mode: "cumulative-from-start",
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: [new Date(2001, 0, 1)]
  }
});

playRate Number

The time (in milliseconds) between animation steps.

When a View is associated with a TimeSlider and the TimeSlider is playing, the playback will pause before advancing if the View is still updating. For example, if the playRate is set to 1,000 (one second) and the View takes 1.5 seconds to render then the TimeSlider thumb(s) will advance every 1.5 seconds rather than every second.

Default Value:1000

Example:

// Start a time slider animation that advances
// ten times a second and stops when it reaches the end.
timeSlider.set({
  loop: false,
  playRate: 100
});
timeSlider.play();

state Stringreadonly

The view model's state.

Value	Description
disabled	not ready yet
ready	ready for time navigation
playing	time is playing in the navigator

Possible Values:"disabled"|"ready"|"playing"

Default Value:disabled

Example:

// Display the current state of the view model.
switch (timeSlider.viewModel.state) {
  case "disabled":
    console.log("The view is not ready or some property are not set.");
    break;
  case "ready":
    console.log("The time slider is ready for use.");
    break;
  case "playing":
    console.log("The time slider is currently animating.");
    break;
}

stops StopsByDates|StopsByCount|StopsByIntervalautocast

Autocasts from Object

Defines specific locations on the time slider where thumbs will snap to when manipulated. If unspecified, ten evenly spaced stops will be added.

For continuous sliding set stops to null.

timeSlider.viewModel.stops = null;

To define regularly spaced stops, parse an object with interval and timeExtent properties with types TimeInterval and TimeExtent respectively. The timeExtent property is optional and used to confine stops to a certain date range. This property is useful to commence stops on a specific day or the week or month. If a stop definition by interval results in excess of 10,000 stops then the view model will default to ten evenly spaced stops.

{
  interval: TimeInterval,
  timeExtent: TimeExtent
}

// Add yearly intervals starting from the beginning of the TimeSlider.
timeSlider.viewModel.stops = {
  interval: {
    value: 1,
    unit: "years"
  }
}

Rather than regular time intervals the TimeSlider can be divided into evenly spaced stops. As with the previous method, divisions can be confined to a specific date range using the optional timeExtent property.

// Add stops at 15 evenly spaced intervals.
timeSlider.viewModel.stops = {
  count: 15
}

For irregular spaced stops simply assign an array of dates as demonstrated below.

// Add nine irregular stops.
timeSlider.viewModel.stops = {
  dates: [
    new Date(2000, 0, 1), new Date(2001, 3, 8), new Date(2002, 0, 10),
    new Date(2003, 12, 8), new Date(2004, 2, 19), new Date(2005, 7, 5),
    new Date(2006, 9, 11), new Date(2007, 11, 21), new Date(2008, 1, 10)
  ]
}

Lastly, to constrain or offset division by count or interval use the optional timeExtent property.

// Add yearly stops from Christmas 2019 to Christmas 2029 only
timeSlider.viewModel.stops = {
  interval: {
    value: 1,
    unit: "years"
  },
  timeExtent: {
    start: new Date(2019, 11, 25),
    end: new Date(2029, 11, 25)
  }
}

// Likewise, add stops that represent quarters of 2019 only.
timeSlider.viewModel.stops = {
  count: 4,
  timeExtent: {
    start: new Date(2019, 0, 1),
    end: new Date(2020, 0, 1)
  }
}

Default Value:{ count : 10 }

Example:

// Add yearly stops starting from the beginning of 2001.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    fullTimeExtent: {
      start: new Date(2000, 5, 1),
      end: new Date(2010, 0, 1)
    },
    stops: {
      interval: {
        value: 1,
        unit: "years"
      },
      timeExtent: {
        start: new Date(2001, 0, 1),
        end: new Date(2010, 0, 1)
      }
    }
  }
});

// Add 15 stops that are evenly distributed for the year 2005 only.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    fullTimeExtent: {
      start: new Date(2000, 5, 1),
      end: new Date(2010, 0, 1)
    },
    stops: {
      count: 15,
      timeExtent: {
        start: new Date(2005, 0, 1),
        end: new Date(2006, 0, 1)
      }
    }
  }
});

// Explicitly define nine stops.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: [
      new Date(2000, 0, 1),
      new Date(2000, 0, 1)
    ],
    stops: {
      dates: [
        new Date(2000, 0, 1), new Date(2001, 3, 8), new Date(2002, 0, 10),
        new Date(2003, 12, 8), new Date(2004, 2, 19), new Date(2005, 7, 5),
        new Date(2006, 9, 11), new Date(2007, 11, 21), new Date(2008, 1, 10)
      ]
    }
  }
});

timeExtent TimeExtentreadonly

The current time extent of the time slider. This property can be watched for updates and used to update the time extent property in queries and/or the layer filters and effects. The following table shows the timeExtent values returned for each mode.

Mode	The timeExtent value
time-window	{start: startDate, end: endDate}
instant	{start: sameDate, end: sameDate}
cumulative-from-start	{start: null, end: endDate}
cumulative-from-end	{start: startDate, end: null}

Default Value:null

Example:

// Display the time extent to the console whenever it changes.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  mode: "time-window",
  fullTimeExtent: {
    start: new Date(2019, 2, 3),
    end: new Date(2019, 2, 5)
  },
  values: [
    new Date(2019, 2, 1),
    new Date(2019, 2, 28)
  ]
});
timeSlider.watch("timeExtent", function(timeExtent){
  console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end);
});

values Date[]

The user defined time extent. Values define the current location of time slider thumbs. The "time-window" mode has two values, the other modes only have one.

Default Value:null

Example:

// Create a time slider and print the time extent to the console whenever it changes.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    view: view,
    mode: "time-window",
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: [
      new Date(2000, 0, 1),
      new Date(2001, 0, 1)
    ]
  }
});
timeSlider.viewModel.watch("timeExtent", function(timeExtent){
  console.log("New time extent starts at: " + timeExtent.start + "and finishes at: " + timeExtent.end);
});

view MapView|SceneView

A reference to the MapView or SceneView. If this property is set, the TimeSlider widget will update the view's timeExtent property whenever the time slider is manipulated or updated programmatically. This property will affect any time-aware layer in the view.

Example:

// Create and then add a TimeSlider widget and then listen to changes in the View's time extent.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    view: view,
    mode: "instant",
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: [new Date(2000, 0, 1)]
  }
});
view.ui.add(timeSlider, "top-left");

view.watch("timeExtent", function(timeExtent){
  console.log("New view time is: " + timeExtent.start);
});

Method Overview

Method Details

next()

Incrementally moves the time extent forward one stop

Example:

// Advance the slider's time extent.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  viewModel: {
    mode: "instant",
    fullTimeExtent: {
      start: new Date(2000, 0, 1),
      end: new Date(2010, 0, 1)
    },
    values: [new Date(2000, 0, 1)]
  }
});
timeSlider.viewModel.next();

play()

Initiates the time slider's temporal playback.

Example:

// Start a TimeSlider animation if not already playing.
if (timeSlider.viewModel.state === "ready") {
  timeSlider.viewModel.play();
}

previous()

Incrementally moves the time extent back one stop.

Example:

timeSlider.viewModel.previous();

stop()

Stops the time slider's temporal playback.

Example:

// Stop the current TimeSlider animation.
if (timeSlider.viewModel.state === "playing") {
  timeSlider.viewModel.stop();
}

updateWebDocument(webmap)

Since: ArcGIS API for JavaScript 4.18

Updates the time slider widget definition in the provided WebMap.

Parameter:

webmap WebMap The webmap to be updated.

Example:

// Load a webmap containing a timeslider widget into a MapView. Once loaded, advance the current time
// extent by one stop and then update the original webmap.

const webmap = new WebMap({
  portalItem: {
    id: "acea555a4b6f412dae98994bcfdbc002"
  }
});

const view = new MapView({
  container: "viewDiv",
  map: webmap
});
await view.when();

const timeSlider = new TimeSlider({
  view
});
// Advance to thumb to next time extent
timeSlider.next();
timeSlider.updateWebDocument(webmap);
webmap.save();