docs/interfaces/_timelineslidercontrol_.timelineslidercontroloptions.html
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TimelineSliderControlOptions | leaflet.timeline</title>
<meta name="description" content="Documentation for leaflet.timeline">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">leaflet.timeline</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="../globals.html">Globals</a>
</li>
<li>
<a href="../modules/_timelineslidercontrol_.html">"TimelineSliderControl"</a>
</li>
<li>
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html">TimelineSliderControlOptions</a>
</li>
</ul>
<h1>Interface TimelineSliderControlOptions</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<span class="tsd-signature-type">ControlOptions</span>
<ul class="tsd-hierarchy">
<li>
<span class="target">TimelineSliderControlOptions</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section tsd-is-not-exported">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#autoplay" class="tsd-kind-icon">auto<wbr>Play</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#duration" class="tsd-kind-icon">duration</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#enablekeyboardcontrols" class="tsd-kind-icon">enable<wbr>Keyboard<wbr>Controls</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#enableplayback" class="tsd-kind-icon">enable<wbr>Playback</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#end" class="tsd-kind-icon">end</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#position" class="tsd-kind-icon">position</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#showticks" class="tsd-kind-icon">show<wbr>Ticks</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#start" class="tsd-kind-icon">start</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#steps" class="tsd-kind-icon">steps</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#waittoupdatemap" class="tsd-kind-icon">wait<wbr>ToUpdate<wbr>Map</a></li>
</ul>
</section>
<section class="tsd-index-section tsd-is-not-exported">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-interface tsd-is-not-exported"><a href="_timelineslidercontrol_.timelineslidercontroloptions.html#formatoutput" class="tsd-kind-icon">format<wbr>Output</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-not-exported">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="autoplay" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> auto<wbr>Play</h3>
<div class="tsd-signature tsd-kind-icon">auto<wbr>Play<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L65">src/TimelineSliderControl.ts:65</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Start playback of the timeline as soon as the page is loaded.</p>
</div>
<p>Default: false</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="duration" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> duration</h3>
<div class="tsd-signature tsd-kind-icon">duration<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L13">src/TimelineSliderControl.ts:13</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Minimum time, in ms, for the playback to take. Will almost certainly
actually take at least a bit longer; after each frame, the next one
displays in <code>duration/steps</code> ms, so each frame really takes frame
processing time PLUS step time.</p>
</div>
<p>Default: 10000</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="enablekeyboardcontrols" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> enable<wbr>Keyboard<wbr>Controls</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Keyboard<wbr>Controls<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L20">src/TimelineSliderControl.ts:20</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Allow playback to be controlled using the spacebar (play/pause) and
right/left arrow keys (next/previous).</p>
</div>
<p>Default: false</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="enableplayback" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> enable<wbr>Playback</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Playback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L26">src/TimelineSliderControl.ts:26</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Show playback controls (i.e. prev/play/pause/next).</p>
</div>
<p>Default: true</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="end" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> end</h3>
<div class="tsd-signature tsd-kind-icon">end<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L52">src/TimelineSliderControl.ts:52</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The end time of the timeline. If unset, this will be calculated
automatically based on the timelines registered to this control.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited tsd-is-not-exported">
<a name="position" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> position</h3>
<div class="tsd-signature tsd-kind-icon">position<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ControlPosition</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="_timelineslidercontrol_.timelineslidercontroloptions.html">TimelineSliderControlOptions</a>.<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#position">position</a></p>
<ul>
<li>Defined in node_modules/@types/leaflet/index.d.ts:1374</li>
</ul>
</aside>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="showticks" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> show<wbr>Ticks</h3>
<div class="tsd-signature tsd-kind-icon">show<wbr>Ticks<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L35">src/TimelineSliderControl.ts:35</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Show ticks on the timeline (if the browser supports it)</p>
</div>
<p>See here for support:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Browser_compatibility">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Browser_compatibility</a></p>
<p>Default: true</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="start" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> start</h3>
<div class="tsd-signature tsd-kind-icon">start<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L47">src/TimelineSliderControl.ts:47</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The start time of the timeline. If unset, this will be calculated
automatically based on the timelines registered to this control.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="steps" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> steps</h3>
<div class="tsd-signature tsd-kind-icon">steps<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L59">src/TimelineSliderControl.ts:59</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>How many steps to break the timeline into. Each step will then be
<code>(end-start) / steps</code>. Only affects playback.</p>
</div>
<p>Default: 1000</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a name="waittoupdatemap" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> wait<wbr>ToUpdate<wbr>Map</h3>
<div class="tsd-signature tsd-kind-icon">wait<wbr>ToUpdate<wbr>Map<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L42">src/TimelineSliderControl.ts:42</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Wait until the user is finished changing the date to update the map. By
default, both the map and the date update for every change. With complex
data, this can slow things down, so set this to true to only update the
displayed date.</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-not-exported">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-interface tsd-is-not-exported">
<a name="formatoutput" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> format<wbr>Output</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-interface tsd-is-not-exported">
<li class="tsd-signature tsd-kind-icon">format<wbr>Output<span class="tsd-signature-symbol">(</span>time<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/skeate/Leaflet.timeline/blob/dec32da/src/TimelineSliderControl.ts#L71">src/TimelineSliderControl.ts:71</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A function which takes the current time value (a Unix timestamp) and
outputs a string that is displayed beneath the control buttons.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>time: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-module">
<a href="../modules/_timeline_.html">"<wbr>Timeline"</a>
</li>
<li class="current tsd-kind-module">
<a href="../modules/_timelineslidercontrol_.html">"<wbr>Timeline<wbr>Slider<wbr>Control"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-interface tsd-parent-kind-module tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html" class="tsd-kind-icon">Timeline<wbr>Slider<wbr>Control<wbr>Options</a>
<ul>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#autoplay" class="tsd-kind-icon">auto<wbr>Play</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#duration" class="tsd-kind-icon">duration</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#enablekeyboardcontrols" class="tsd-kind-icon">enable<wbr>Keyboard<wbr>Controls</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#enableplayback" class="tsd-kind-icon">enable<wbr>Playback</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#end" class="tsd-kind-icon">end</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#position" class="tsd-kind-icon">position</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#showticks" class="tsd-kind-icon">show<wbr>Ticks</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#start" class="tsd-kind-icon">start</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#steps" class="tsd-kind-icon">steps</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#waittoupdatemap" class="tsd-kind-icon">wait<wbr>ToUpdate<wbr>Map</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-interface tsd-is-not-exported">
<a href="_timelineslidercontrol_.timelineslidercontroloptions.html#formatoutput" class="tsd-kind-icon">format<wbr>Output</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>