Создайте «слайдер» диапазона HTML5, который выполняет те же действия, что и раскрывающееся меню

Question

У меня есть выпадающее меню, которое заполняется из базы данных. Когда я выбираю значение в меню, отображается таблица данных, выбранных из базы данных. Я хотел бы изменить это на слайдер диапазона HTML5. Пока без удачи. Я также хочу показывать значения (даты) рядом с диапазоном по мере его продвижения. Это код для выпадающего меню:

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

Ниже приведено то, что я пока имею на «слайдере»:

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>

Любая помощь будет принята с благодарностью! Спасибо

Answer 1

Вот jsFiddle , который обновляет строку таблицы с помощью jQuery. Предположительно, вы бы заменили данные вызовом AJAX.

Если бы вы немного уточнили, где именно точно у вас возникли проблемы, кто-то другой сможет подобрать решение, которое лучше соответствует вашим потребностям.