HTML5输入类型范围显示范围值

HTML5 输入类型范围显示范围值

基础概念

HTML5 中的 <input type="range"> 元素用于创建一个滑动条，用户可以通过滑动来选择一个范围内的值。这个元素通常用于表示一个数值范围，如音量控制、亮度调节等。

类型

HTML5 的 <input type="range"> 主要有以下属性：

min：指定滑动条的最小值。
max：指定滑动条的最大值。
value：指定滑动条的初始值。
step：指定滑动条每次移动的增量。

应用场景

音量控制：在音频播放器中调整音量。
亮度调节：在图像或视频播放器中调整亮度。
温度控制：在智能家居系统中调整温度。
进度条：显示任务的完成进度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Range Input Example</title>
</head>
<body>
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50" step="1">
    <span id="volumeValue">50</span>

    <script>
        const volumeSlider = document.getElementById('volume');
        const volumeValueDisplay = document.getElementById('volumeValue');

        volumeSlider.addEventListener('input', function() {
            volumeValueDisplay.textContent = this.value;
        });
    </script>
</body>
</html>