Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/workers
Class: TimeSlider

require(["esri/dijit/TimeSlider"], function(TimeSlider) { /* code goes here */ });

Description

(Added at v2.0)
The TimeSlider widget is used for visualizing content within a map that contains time-aware layers.

See also

Samples

Search for samples that use this class.

Constructors

NameSummary
new TimeSlider(params, srcNodeRef)Creates a new TimeSlider object.

CSS

esri/dijit/TimeSlider | Download source

Properties

NameTypeSummary
loopBooleanDefault value is false.
playingBooleanDefault value is false.
thumbCountNumberDefault value is 1.
thumbMovingRateNumberRate at which the time animation plays.
timeStopsDate[]An array of dates representing the stops (tics) on the TimeSlider.

Methods

NameReturn typeSummary
createTimeStopsByCount(timeExtent, count?)NoneThe specified number of time stops are created for the input time extent.
createTimeStopsByTimeInterval(timeExtent, timeInterval?, timeIntervalUnits?)NoneCreate a time stop for each interval specified, i.e., (week, month, day).
getCurrentTimeExtent()TimeExtentGets the current time extent for the time slider.
next()NoneMove to the next time step.
pause()NonePause the time slider.
play()NonePlay the time slider.
previous()NoneMove to the previous time step.
setLabels(labels)NoneSpecify an array of strings to be used as labels.
setLoop(loop)NoneDetermines whether or not loop.
setThumbCount(thumbCount)NoneThe number of thumbs to display.
setThumbIndexes(indexes)NoneArray of two integers, the first value determines where to put the first thumb.
setThumbMovingRate(thumbMovingRate)NoneChange the rate at which the time animation plays.
setTickCount(count)NoneSpecify the number of ticks to display on the time slider.
setTimeStops(timeStops)NoneManually define the time stop locations by providing an array of dates.
singleThumbAsTimeInstant(createTimeInstants)NoneDetermine if the time is displayed for an instant in time.
startup()NoneFinalizes the creation of the widget.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
next
{
  timeExtent: <TimeExtent>
}
Fires when the next button is clicked or TimeSlider.next() method is invoked.
pause
{
  timeExtent: <TimeExtent>
}
Fires when the pause button is clicked or TImeSlider.pause() method is invoked.
play
{
  timeExtent: <TimeExtent>
}
Fires once when the play button is clicked or Timeslider.play() method is invoked.
previous
{
  timeExtent: <TimeExtent>
}
Fires when the previous button is clicked or TimeSlider.previous() is invoked.
time-extent-change
{
  timeExtent: <TimeExtent>
}
Fires when the timeExtent of the TimeSlider is changed.
Constructor Details

new TimeSlider(params, srcNodeRef)

Creates a new TimeSlider object.
Parameters:
<Object> params Required Parameters for the time slider object. See the options table below for parameters.
<Node | String> srcNodeRef Required HTML element where the time slider should be rendered.
params properties:
<Boolean> excludeDataAtLeadingThumb Optional When true, subtracts one second to the time extent's end time to exclude data at the exact end time instant.
<Boolean> excludeDataAtTrailingThumb Optional When true, adds one second to the time extent's start time to exclude data at the exact start time instant.
Property Details

<Boolean> loop

Default value is false.
Known values: true | false

<Boolean> playing

Default value is false.
Known values: true | false

<Number> thumbCount

Default value is 1.

<Number> thumbMovingRate

Rate at which the time animation plays. Default value is 1000 milliseconds.

<Date[]> timeStops

An array of dates representing the stops (tics) on the TimeSlider.
Method Details

createTimeStopsByCount(timeExtent, count?)

The specified number of time stops are created for the input time extent.
Parameters:
<TimeExtent> timeExtent Required The time extent used to define the time slider's start and end time stops.
<Number> count Optional The number of time stops to create.

createTimeStopsByTimeInterval(timeExtent, timeInterval?, timeIntervalUnits?)

Create a time stop for each interval specified, i.e., (week, month, day).
Parameters:
<TimeExtent> timeExtent Required The time extent used to define the time slider's start and end time stops.
<Number> timeInterval Optional The length of the time interval.
<String> timeIntervalUnits Optional Valid values are listed in the TimeInfo constants table.
Sample:
require([
  "esri/map", "dojo/_base/connect", "esri/dijit/TimeSlider", "dojo/dom", ... 
], function(Map, connect, TimeSlider, dom, ... ) {
  var map = new Map( ... );
  connect.connect(map,"onLayersAddResult",function(results){
    var timeSlider = new TimeSlider({},dom.byId("timeSliderDiv"));
    map.setTimeSlider(timeSlider);        
    timeSlider.setThumbCount(1);
    timeSlider.createTimeStopsByTimeInterval(results[1].layer.timeInfo.timeExtent,1,'esriTimeUnitsWeeks');
    timeSlider.startup();
  })
  ...
});

getCurrentTimeExtent()

Gets the current time extent for the time slider.
Return type: TimeExtent
Sample:
var startTime = timeSlider.getCurrentTimeExtent().startTime;

next()

Move to the next time step.

pause()

Pause the time slider.

play()

Play the time slider.

previous()

Move to the previous time step.

setLabels(labels)

Specify an array of strings to be used as labels. The array position for each string defines which tick it will be placed on.
Parameters:
<String[]> labels Required An array of strings that define the labels for each tick.
Sample:

Add a label for every other tick.

require([
  "esri/dijit/TimeSlider", "dojo/_base/array", ... 
], function(TimeSlider, array, ... ) {
  var timeSlider = new TimeSlider( ... );
  var labels = array.map(timeSlider.timeStops, function(timeStop,i){ 
    if(i%2 === 0){
      return timeStop.getUTCFullYear(); }
    else{
      return "";
    }
  });	
  timeSlider.setLabels(labels);
  ...
});

setLoop(loop)

Determines whether or not loop. Default value is false.
Parameters:
<Boolean> loop Required True plays the time slider continuously. Default value is false.
Sample:

timeSlider.setLoop(true);

setThumbCount(thumbCount)

The number of thumbs to display. A value of one displays a single thumb. Setting the value to 2 displays a range slider.
Parameters:
<Number> thumbCount Required The number of thumbs to display. Default value is one.
Sample:

timeSlider.setThumbCount(2);

setThumbIndexes(indexes)

Array of two integers, the first value determines where to put the first thumb. If it is a two thumb slider the second value determines where to place the additional thumb.
Parameters:
<Number[]> indexes Required Array of two integers.
Sample:
timeSlider.setThumbCount(2);
timeSlider.setThumbIndexes([0,1]);

setThumbMovingRate(thumbMovingRate)

Change the rate at which the time animation plays.
Parameters:
<Number> thumbMovingRate Required The rate at which the time slider plays. Default value is 1500.
Sample:

timeSlider.setThumbMovingRate(2000);

setTickCount(count)

Specify the number of ticks to display on the time slider. (Added at v2.1)
Parameters:
<Number> count Required The number of ticks to display on the slider.
Sample:
require([
  "dojo/date", ... 
], function(date, ... ) {
  timeSlider.setTickCount(date.difference(timeExtent.startTime,timeExtent.endTime,"day"));
  ...
});

setTimeStops(timeStops)

Manually define the time stop locations by providing an array of dates.
Parameters:
<Date[]> timeStops Required Array of dates
Sample:
require([
  "esri/dijit/TimeSlider", ... 
], function(TimeSlider, ... ) {
  var timeSlider = new TimeSlider( ... );
  var myTimeStepIntervals = [new Date("01/01/1970"), new Date("01/01/1971"), new Date("01/01/1972"),
      new Date("01/01/1973"), new Date("01/01/1974"),new Date("01/01/1975"), new Date("01/01/1976")];
  timeSlider.setTimeStops(myTimeStepIntervals);
  ...
});

singleThumbAsTimeInstant(createTimeInstants)

Determine if the time is displayed for an instant in time. Only valid when the thumb count is set to one.
Parameters:
<Boolean> createTimeInstants Required When true, the time slider displays features for the current point in time. When false cumulative data is displayed from the start time to the current thumb location. The default value is false.
Sample:
timeSlider.singleThumbAsTimeInstant(true);

startup()

Finalizes the creation of the widget. (Added at v3.12)
Event Details
[ On Style Events | Connect Style Event ]

next

Fires when the next button is clicked or TimeSlider.next() method is invoked. (Added at v3.15)
Event Object Properties:
<TimeExtent> timeExtent The current time slice of the time slider.

pause

Fires when the pause button is clicked or TImeSlider.pause() method is invoked. (Added at v3.15)
Event Object Properties:
<TimeExtent> timeExtent The current time slice of the time slider.

play

Fires once when the play button is clicked or Timeslider.play() method is invoked. (Added at v3.15)
Event Object Properties:
<TimeExtent> timeExtent The current time slice of the time slider.

previous

Fires when the previous button is clicked or TimeSlider.previous() is invoked. (Added at v3.15)
Event Object Properties:
<TimeExtent> timeExtent The current time slice of the time slider.

time-extent-change

Fires when the timeExtent of the TimeSlider is changed. (Added at v3.6)
Event Object Properties:
<TimeExtent> timeExtent The current time slice of the time slider.
Sample:
require([
 "dojo/dom", ... 
], function( dom, ... ) {
  timeSlider.on("time-extent-change",extentChanged);
  function extentChanged(evt){
    //format the dates for display
    var timeExtent = evt.timeExtent;
    var startVal = timeExtent.startTime.getFullYear();
    var endVal = timeExtent.endTime.getFullYear();
    dom.byId("timeVal").innerHTML = "<b> Current Time Extent:" + startVal + " TO " + endVal  + "<\/b>";
  }
  ...
});