如何使用JavaScript修改滑块表单旁文本且避免拖动时滑块消失

问题原因 #

你的代码直接修改了id为slider的form元素的textContent，这会把form内部所有子元素（包括label、滑块input）全部替换为纯文本数值，自然滑块就消失了。

修复方案 #

你只需要给显示数值的label添加单独的id，仅修改label的文本内容即可，不需要操作整个form容器：

调整后的HTML代码 #

<form>
    <label for="slide_inner" id="slide_value">0</label>
    <input id="slide_inner" oninput="slide()" type="range" min="0" max="26" value="0" class="slider">
</form>

这里将原onchange替换为oninput，可以实现拖动滑块时实时更新数值，无需松开滑块才触发更新。

调整后的JavaScript代码 #

function slide(){
    let v = document.getElementById("slide_inner");
    document.getElementById("slide_value").textContent = v.value;
}

内容的提问来源于stack exchange，提问作者random math student