TimeSlider widget

Explore in the sandboxView live

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.

It uses an instance of FeatureLayer to visualize incremental precipitation forecast for next 72 hours across the contiguous United States with 6-hour interval.

The map displays the Quantitative Precipitation Forecast (QPF) for the next 72 hours across the contiguous United States. Data are updated hourly from the National Digital Forecast Database produced by the National Weather Service. Visit the portal item description page for more information.

There are four different mode options when initializing the TimeSlider widget: instant, time-window, cumulative-from-start, and cumulative-from-end. The default mode for the time slider is time-window. The sample uses this default mode, meaning that slider will show precipitation data that falls within a given time range, which is 6 hours in this case.

We are setting the view property on the time slider widget. The TimeSlider widget will update the view's timeExtent whenever the time slider's timeExtent changes. Setting the view property will affect any time-aware layer in the view.

       
1
2
3
4
5
6
7
// 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 of the time slider widget is set as shown below. The end time of the layer.timeInfo.fullTimeExtent for the service does not make full hour. So the TimeExtent.expandTo() method is called to around up the time slider's fullTimeExtent to fit full hours.

                                                                                                         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>TimeSlider widget | Sample | ArcGIS API for JavaScript 4.21</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      #timeSlider {
        position: absolute;
        left: 5%;
        right: 5%;
        bottom: 20px;
      #titleDiv {
        padding: 10px;
        font-weight: 36;
        text-align: center;
    </style>
    <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/TimeSlider",
      "esri/widgets/Expand",
      "esri/widgets/Legend"
    ], (Map, MapView, FeatureLayer, TimeSlider, Expand, Legend) => {
      const layer = new FeatureLayer({
        url:
          "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NDFD_Precipitation_v1/FeatureServer/0"
      const map = new Map({
        basemap: "hybrid",
        layers: [layer]
      const view = new MapView({
        map: map,
        container: "viewDiv",
        zoom: 4,
        center: [-100, 30]
      // time slider widget initialization
      const timeSlider = new TimeSlider({
        container: "timeSlider",
        view: view,
        timeVisible: true, // show the time stamps on the timeslider
        loop: true
      // add the UI for a title
      view.ui.add("titleDiv", "top-right");
      view.whenLayerView(layer).then((lv) => {
        // around up the full time extent to full hour
        timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
        timeSlider.stops = {
          interval: layer.timeInfo.interval
        };
      });
      const legend = new Legend({
        view: view
      const legendExpand = new Expand({
        expandIconClass: "esri-icon-legend",
        expandTooltip: "Legend",
        view: view,
        content: legend,
        expanded: false
      view.ui.add(legendExpand, "top-left");
  </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="timeSlider"></div>
    <div id="titleDiv" class="esri-widget">
      <div id="titleText">Precipitation forecast for next 72 hours </div>
    </div>
  </body>

</html>
    
1
2
3
4
view.whenLayerView(layer).then(function (lv) {
  // around up the full time extent to full hour
  timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.