Showing values beside HTML5 range "slider"

I have a range "slider" and I want it to display values from a database beside it (times) as I move along it. Be开发者_高级运维low is what I have so far. The earliest and latest dates echo fine before the slider, so I know I'm getting them from the DB ok, but when I want them to show up beside the slider they don't. I just get values from 0 to 100. Any ideas to fix this? Thanks

$sqltime = "SELECT Time FROM Test";
$resulttime = mysql_query($sqltime);

$vartime = array();
while ($rowtime = mysql_fetch_array($resulttime)) {
$bmsTime   = $rowtime['Time'];
//Convert Excel Timestamp of DB to Unix Timestamp
$unixtime=($bmsTime-25569)*86400;
$vartime[] =date('l jS \of F Y h:i:s A',($unixtime));
}


echo "Earliest Date:". ($vartime[0]) ."<br>";
$timemax=end($vartime);
echo "Latest Date:". ($timemax)."<br>";
echo "<input id='slider' type='range' min=\"$vartime[0]\" max=\"$timemax\" value=\"$vartime[0]\" step='any' />
<span id='range'> </span>";

?>
<script>
    var selectmenu=document.getElementById("slider");
    var valchanged;
    selectmenu.onchange=function changeval(){ 
    valchanged=selectmenu.value;
    document.getElementById("range").innerHTML=valchanged;
    } 
</script>

As pimvdb said, the range input type cannot take dates. It can only take floating-point numbers as per the spec.

To achieve what you are after, you will likely have to use a third party JavaScript library or write your own implementation.