Create an HTML5 range "slider" that does the same as the following drop down menu

I have a drop down menu, which is filled from a database. When I select a value in the menu it displays a table of the data selected from the database. I'd like to change this to an HTML5 range slider. So far with no luck. I also want to show the values (dates) beside the range as I move along it. This is the code to the drop down menu:

// Set SQL string
$query  = "SELECT * FROM Test";
// Execute SQL
$result = mysql_query($query);
// Find number of rows in the resulting recordset array
$num    = mysql_numrows($result);

// Initialise loop counter
$i = 0;    

echo ("<form><select name='users' onchange='showUser(this.value)'>");

// Loop through recordset until end
while ($i < $num) {
    // Associate variables for result at position i开发者_如何学JAVA at table location specified
    $Time = mysql_result($result, $i, "Time");

    // Echo each entry as an OPTION for the Select List
    echo ("<option value=\"$Time\">$Time</option>");

    // Increment Loop Counter
    $i++;
}
echo ("</select></form><br>");

gettime.php:

$sql = "SELECT * FROM Test WHERE Time = '" . $q . "'";

$resultb = mysql_query($sql);
if (!$resultb) {
    echo "<p>The following SQL failed</p><p>" . $sql . "</p>";
}


echo "<table border='1'>
    <tr>
    <th>Time</th><th>First PC Room</th>
    <th>First Group Study Room 1</th>
    <th>First Group Study Room 2</th>
    <th>First Main Room</th>
    </tr>";


while ($rowb = mysql_fetch_array($resultb)) {

$bmsTime = $rowb['Time'];
//Convert Excel Timestamp of DB to Unix Timestamp
$unixtime=($bmsTime-25569)*86400;
$readable=date('l jS \of F Y h:i:s A',($unixtime));
    echo "<tr>";
    echo "<td>" . $readable . "</td>";
    echo "<td>" . $rowb['firstPCroom'] . "</td>";
    echo "<td>" . $rowb['firstGrpStdyRm1'] . "</td>";
    echo "<td>" . $rowb['firstGrpStdyRm2'] . "</td>";
    echo "<td>" . $rowb['firstmainroom'] . "</td>";
    echo "</tr>";
}
echo "</table>";

Below is what I have so far on the "slider":

echo "<input id='slider' type='range' min='0' max=\"$num\" step='any' />
                    <span id='range'> </span>";

?>
<script>
    var selectmenu=document.getElementById("slider");
    var colorchange;
    selectmenu.onchange=function changecolour(){ 

    if (selectmenu.value<"0.5")
    {colorchange=0}

    else if (selectmenu.value>="0.5") {colorchange=Math.round(selectmenu.value)}
    document.getElementById("range").innerHTML=colorchange;
    }
</script>

Any help would be greatly appreciated! Thanks

Here is a jsFiddle that updates a table row using jQuery. Presumably you would replace the data with an AJAX call.

If you were a little more specific about where exactly you were having trouble, someone else may be able to tailor a solution that better fits your needs.