NewtonI

Cannot have two TimeSliders on the page and TimeSlider cannot be created twice

Discussion created by NewtonI on Jul 8, 2011
Latest reply on Jul 11, 2011 by NewtonI
Hi!
We cannot have two TimeSliders on the page. Also we cannot create slider, destroy it and create again. Second TimeSlider.startup() returns error "Tried to register widget with id==ts but that id is already registered".
Our TimeSlider ids are not 'ts'.
Is here anybody who had two TimeSliders on the page?
Thanks!
The page source is here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>TimeSlider Error </title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" />

<script type="text/javascript">
  var djConfig = {
   parseOnLoad: true
  };
</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3">
</script>

<script type="text/javascript" language="javascript">
  dojo.require("esri.map");
  dojo.require("esri.dijit.TimeSlider");

  function init() {
   var timeSliderFire = new esri.dijit.TimeSlider({style: "width:100%;" }, dojo.byId("dTimeSliderFire"));
   timeSliderFire.setThumbCount(1);
   timeSliderFire.setThumbMovingRate(2000);
   timeSliderFire.loop = true;

   var fireDates = [new Date("2010-04-20"), new Date("2010-04-29"), new Date("2010-05-09"), new Date("2010-05-16"), new Date("2010-06-09")];
   timeSliderFire.setTimeStops(fireDates);
   timeSliderFire.startup();
   var labels = ["2010-04-20", "2010-06-09"];
   timeSliderFire.setLabels(labels);

   var timeSliderReg = new esri.dijit.TimeSlider({style: "width:100%;" }, dojo.byId("dTimeSliderReg"));
   timeSliderReg.setThumbCount(1);
   timeSliderReg.setThumbMovingRate(2000);
   timeSliderReg.loop = true;

   var fireRegs = [new Date("2010-04-20"), new Date("2010-04-29"), new Date("2010-05-09"), new Date("2010-05-16"), new Date("2010-06-09")];
   timeSliderReg.setTimeStops(fireRegs);
   timeSliderReg.startup();
   labels = ["2010-04-20", "2010-06-09"];
   timeSliderReg.setLabels(labels);
  }

  dojo.addOnLoad(init);
</script>

</head>
<body class="claro">
<div id="pnlFires" style="position:absolute; top: 150px; left: 300px; height: 150px; width: 800px;">
  <div id="dTimeSliderFire"></div>
</div>
<div id="pnlReg" style="position:absolute; top: 350px; left: 300px; height: 150px; width: 800px;">
  <div id="dTimeSliderReg"></div>
</div>
</body>
</html>

Outcomes