import "@arcgis/map-components/components/arcgis-time-slider";
The Time Slider component simplifies visualization of temporal data in your application.
Demo
Properties
Property | Attribute | Type |
---|---|---|
| ||
auto-destroy-disabled | boolean | |
disabled | boolean | |
effectiveStops readonly |
| Array<Date> |
| ||
icon | string | |
label | string | |
layout | "auto" | "compact" | "wide" | |
loop | boolean | |
mode | "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window" | |
play-rate | number | |
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ArcgisLinkChart | ArcgisMap | ArcgisScene | string | |
state readonly | state | "disabled" | "playing" | "ready" |
| ||
| Array<TickConfig> | |
| ||
time-visible | boolean | |
time-zone | string |
actions
actions: Collection<Action>
Defines actions that will appear in a menu when the user clicks the ellipsis button
in the widget.
autoDestroyDisabled
autoDestroyDisabled: boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
disabled
disabled: boolean
When true
, sets the widget to a disabled state so the user cannot interact with it.
- Attribute
- disabled
- Default value
- false
effectiveStops
effectiveStops: Array<Date>
Lists the specific locations on the timeline where handle(s) will snap to when manipulated.
- Default value
- null
icon
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.
- Attribute
- icon
- Default value
- "clock"
layout
layout: "auto" | "compact" | "wide"
Determines the layout used by the TimeSlider widget.
- Attribute
- layout
- Default value
- "auto"
loop
loop: boolean
When true
, the time slider will play its animation in a loop.
- Attribute
- loop
- Default value
- false
mode
mode: "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window"
The time slider mode.
- Attribute
- mode
- Default value
- "time-window"
playRate
playRate: number
The time (in milliseconds) between animation steps.
- Attribute
- play-rate
- Default value
- 1000
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
- Attribute
- position
- Default value
- "bottom-left"
referenceElement
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
- Attribute
- reference-element
state
state: "disabled" | "playing" | "ready"
The view model's state.
- Attribute
- state
- Default value
- "disabled"
stops
stops: StopsByCount | StopsByDates | StopsByInterval
Defines specific locations on the time slider where thumbs will snap to when manipulated.
- Default value
- { count : 10 }
tickConfigs
tickConfigs: Array<TickConfig>
When set, overrides the default TimeSlider ticks labelling system.
- Default value
- null
timeExtent
timeExtent: TimeExtent
The current time extent of the time slider.
- Default value
- null
timeVisible
timeVisible: boolean
Shows/hides time in the display.
- Attribute
- time-visible
- Default value
- false
timeZone
timeZone: string
Dates and times displayed in the widget will be displayed in this time zone.
- Attribute
- time-zone
Methods
Method | Signature |
---|---|
applyTimeSliderSettings(settings: Pick<__esri.TimeSliderProperties, "fullTimeExtent" | "loop" | "stops">): Promise<void> | |
componentOnReady(): Promise<void> | |
destroy(): Promise<void> | |
next(): Promise<void> | |
play(): Promise<void> | |
previous(): Promise<void> | |
stop(): Promise<void> | |
updateWebDocument(webmap: __esri.WebMap): Promise<void> |
applyTimeSliderSettings
applyTimeSliderSettings(settings: Pick<__esri.TimeSliderProperties, "fullTimeExtent" | "loop" | "stops">): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
settings | {
loop?: boolean | undefined;
fullTimeExtent?: nullish | TimeExtentProperties;
stops?: nullish | Array<Date>;
} |
- Returns
- Promise<void>
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
updateWebDocument
updateWebDocument(webmap: __esri.WebMap): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
webmap |
- Returns
- Promise<void>
Events
Event | Type |
---|---|
{ name: "timeExtent" | "state" | "effectiveStops" | "fullTimeExtent"; } | |
undefined | |
TimeSliderTriggerActionEvent |