When the jQuery time slider changes you can create a new time extent and set that to be the map's time extent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>ESRI Map and jQuery</title>
<link href="jquery.time.slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var djConfig = { parseOnLoad: true };
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.time.slider.js" type="text/javascript"></script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1compact"></script>
<script type="text/javascript" language="Javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
var map;
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-18233316,"ymin":981737,"xmax":-8449376,"ymax":6852101,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {extent:startExtent});
dojo.connect(map, "onLoad", function () {
$(document).ready(jQueryReady);
});
var layers = [];
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
// feature layer
var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: [ "*" ]
});
featureLayer.setDefinitionExpression("magnitude > 2");
dojo.connect(map, "onLayersAddResult", initSlider);
map.addLayers([featureLayer]);
}
function jQueryReady() {
$('.timepick').change(function () {
if(map.timeExtent){
console.log('change');
var timespan = new esri.TimeExtent();
timespan.startTime = $('.timepick').timeslider('get');
map.setTimeExtent(timespan);
$('#chosen-time').text($('.timepick').timeslider('get').toString());}
}).timeslider({ value: '12:00' });
}
function initSlider(result) {
console.log('initSlider');
var timeExtent = new esri.TimeExtent();
var now = new Date();
timeExtent.endTime = now;
map.setTimeExtent(timeExtent);
}
dojo.addOnLoad(init);
</script>
</head>
<body >
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
<span id="chosen-time"></span>
<label>Time slider span: <span class="timepick">5:00</span></label>
</body>
</html>
