Timeslider

JavaScript time slider for desktop and mobile

Specification

Init options

• container: Required. The HTML element the time slider will be created into. Must already be added to the DOM, so slider knows dimensions.
• language: the language, e.g. 'en' or 'de'
• initialDate: Required. Unix timestamp in ms. Determins which date is preselected.
• now: Optional, defaults to "Date.now()". Unix timestamp in ms. Used for the "now" indicator.
• first: Required. Unix timestamp in ms. First selectable date.
• last: Required. Unix timestamp in ms. Last selectable date.
• interval: The interval between the time steps, e.g. 3 hours
• playSpeed: Optional, defaults to 1000ms. Playback speed in ms.
• timeZoneAbbreviationLabel: Displayed as info to the user. Optional.
• timeZoneOffset: Optional, defaults to 0. Offset from UTC in ms.
• onChange: Required. Callback function for date change. Takes these parameters:     * date: The selected date as Unix timestamp in ms.     * timeZone: The UTC offset in ms.
• arrowKeysEnabled: Select the next/previous time step with the keyboard arrow keys. Default: false.
• mode: auto (default), desktop or mobile

Methods

• getDate(): number - returns the date as Unix timestamp in ms
• setDate(date: number | Date): void - set a date
• setLoading(isLoading: boolean) - show loading animation
• destroy() - remove all event listeners and remove from DOM

Features

• inspired by windy.com time slider
• optimized slider for desktop and mobile
• highly responsive