Créer un curseur "plage" HTML5 qui fait la même chose que le menu déroulant suivant

Question

J'ai un menu déroulant, qui est rempli à partir d'une base de données. Lorsque je sélectionne une valeur dans le menu, elle affiche une table des données sélectionnées dans la base de données. J'aimerais changer cela en un curseur de plage HTML5. Jusqu'à présent, sans chance. Je veux aussi montrer les valeurs (dates) à côté de la plage au fur et à mesure que je la contourne. Ce est le code dans le menu déroulant:

// 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 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>"; 

Ci-dessous ce que j'ai jusqu'à présent sur le "curseur":

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> 

Tous De l'aide serait grandement appréciée! Merci

Answer 1

Voici jsFiddle qui met à jour une ligne de table en utilisant jQuery. Vraisemblablement, vous remplacer les données par un appel AJAX.

Si vous étiez un peu plus précis sur les endroits où exactement vous aviez des problèmes, quelqu'un d'autre pourrait être en mesure d'adapter une solution qui correspond mieux à vos besoins.