javascript - 在表单 slider 上按设定步骤设置值-6ren

javascript - 在表单 slider 上按设定步骤设置值

转载作者：行者123 更新时间：2023-11-28 20:03:39

我用 HTML5 创建了一个表单 slider 。目前，它根据 slider 的步长设置显示数值。我想在 slider 的特定步骤处将值与文本句子一起显示。

我现在的代码:

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>

最佳答案

您可以使用这样的开关/外壳:

<head>
    <script type="text/javascript">

        function showValue(newValue)
        {
            var sentence = "";

            switch (newValue) {
                case "10":
                    sentence = ": Your sentence for step 10";
                    break;
                case "25":
                    sentence = ": Another sentence for step 25";
                    break;
            }
            document.getElementById("range").innerHTML = newValue + sentence;
        }
    </script>
</head>
<body>
    <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
    <span id="range">0</span>
</body>