I am developing with the ArcGIS JavaScript web API and ArcGIS server 10.0.

I have a time-aware layer in in my map, and also a timeslider. The full time extent of the map is a year, with data every month.

I want that when the map loads, the data is shown for that particular month, and the slider is also on that month.

I can programatically set the timeExtent on the map, using map.setTimeExtent(), but the timeslider does not auto-update to this date.

How should the timeExtent to be set, so that the timeSlider auto-updates along with it?

To see an reproducible example, go to the sample: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/time_sliderwithdynamiclayer/index.html, and open up your firebug/developer console, and enter


The map will show you data for the entire period, but the time slider does not update.

1 Answer 1


You are approaching this backwards--the time slider's time extent updates the map's time extent, not the other way around. It's my understanding that the map.setTimeExtent() function should only be called when a time slider is not in use.

You should be setting the extent of the time slider and setting the position of the time thumb(s), which then updates the current time extent of the map.

If you have already configured your time slider, this is as simple as:

// Assuming time slider has a single time thumb

This will move the time slider's thumb position to the first time stop, which will then update the map's time extent to match. Any time-enabled layers will be listening for this event and will redraw automatically.

If you have two time thumbs, you have to set the index of each one:

// Moves first time thumb to the first time stop and the second time thumb to the second time stop

Here is a more complete example, assuming you have data valid on the first day of each month:

var timeStops = [new Date(2013, 0, 1), new Date(2013, 1, 1), new Date(2013, 2, 1), new Date(2013, 3, 1), new Date(2013, 4, 1), new Date(2013, 5, 1), new Date(2013, 6, 1), new Date(2013, 7, 1), new Date(2013, 8, 1), new Date(2013, 9, 1), new Date(2013, 10, 1), new Date(2013, 11, 1)]

var timeSlider = new esri.dijit.TimeSlider({style: "width: 100%;"}, dojo.byId("timeSliderDiv"));

// Assuming slider has only one thumb:
// Set position of time slider's thumb to the first date (January 1, 2013):
// Set animation speed to 1 second:
// Time slider thumb position represents an instantaneous time, rather than cumulative:
// Allow animation to loop:
// Start it up!

If you already have a time slider and need to reset its time extent:

// Assuming time slider has only one time thumb:
// startup() must be called after updating time stops:
  • I don't think you have understood my problem. My timeslider has been properly set up. I want to programatically set the slider to a specific time extent within the full time extent. Can you show me how to set the slider to a specific timextent within the already set full timeExtent? May 29, 2013 at 15:15
  • 2
    If you've already created your time slider and set your time stops, you just need to call timeSlider.setThumbIndexes(). If you have only one thumb, you would call timeSlider.setThumbIndexes([thumbIndex]), where thumbIndex is the index into the timeStops array representing your desired time extent. You shouldn't be setting the time extent of your map - you just need to set the position of the time thumb to the proper position, which will in turn update the map's time extent.
    – greenlaw
    May 29, 2013 at 15:19
  • Edited my answer to include my above comment. Did this solve your problem?
    – greenlaw
    May 29, 2013 at 18:19
  • I was just waiting to go back to office and test it out. I can confirm that it works! Thanks a ton! May 30, 2013 at 3:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.