如何在范围滑块中定义特定值?

问题描述 投票:0回答:1

所以我正在 php 上的一个网站上工作,我必须为多年来的出版物做一个滑块。更详细地解释一下,我想要的只是滑过出版物发表的年份。

// Your database connection and other PHP code

                // Query to retrieve the minimum and maximum publication years
                $query = "SELECT MIN(YEAR(data)) AS min_year, MAX(YEAR(data)) AS max_year FROM publicacoes";
                $stmt = $pdo->prepare($query);
                $stmt->execute();
                $result = $stmt->fetch(PDO::FETCH_ASSOC);

                // Retrieve the minimum and maximum years from the query result
                $minYear = $result['min_year'];
                $maxYear = $result['max_year'];
                
?>

<script>
    // JavaScript function to update the displayed value when slider changes
    function updateSliderValue() {
        var slider = document.getElementById("yearSlider");
        var selectedYearDisplay = document.getElementById("selectedYearDisplay");
        
        // Update the displayed value
        selectedYearDisplay.innerText = slider.value;
    }
</script>


<input id="yearSlider" type="range" min="<?= $minYear ?>" max="<?= $maxYear ?>" value="<?= $maxYear ?>" onchange="updateSliderValue()">
            <span id="selectedYearDisplay"></span>

此代码仅限制从发布第一年到最近发布年份的滑块。

年份在出版物表的“数据”栏中。

我考虑过将不同的年份值存储在数组中,然后将其传递给滑块,但我不知道该怎么做。任何帮助将不胜感激。

javascript php html
1个回答
0
投票

您的查询只有 2 个值,最小值和最大值。

因此您更改了请求,按“年份字段名称”分组。 然后你就有了所有年份的清单。它可以使用 foreach 并创建幻灯片。

© www.soinside.com 2019 - 2024. All rights reserved.