如何在拖动range input时获取当前值并打印到控制台？

你可以使用input事件处理器——它会在拖动滑块的过程中实时触发，刚好满足你每次拖动时打印值的需求。下面是两种具体实现方式：

方式1：直接在HTML元素上绑定事件 #

修改你的range input代码，添加oninput属性即可：

<input class="range-slide" type="range" min="0" max="10" value="0" oninput="console.log(this.value)">

方式2：JS单独绑定事件（推荐，分离结构与逻辑） #

保持HTML代码不变，通过JavaScript获取元素并绑定input事件：

<input class="range-slide" type="range" min="0" max="10" value="0">

<script>
const rangeSlider = document.querySelector('.range-slide');
rangeSlider.addEventListener('input', function() {
    console.log(this.value);
});
</script>

补充说明：如果只需要在拖动结束后打印值，可以把input换成change事件，但input是实时响应拖动操作的最优选择。

内容的提问来源于stack exchange，提问作者Bappaditya sing