value 属性的基本用法
value 属性用于设置或返回 <input> 元素的当前值。对于 type="range" 的 <input> 元素来说，value 属性可以设置滑块的初始位置。当用户拖动滑块时，value 属性的值也会随之改变。
<input type="range" min="0" max="100" value="50">
在上面的示例中，我们创建了一个滑动条，其取值范围为 0 到 100，初始值为 50。用户可以通过拖动滑块来选择一个在 0 到 100 之间的数值。
通过 JavaScript 改变 value 属性的值
除了在 HTML 中直接设置 value 属性的初始值外，我们还可以通过 JavaScript 动态地改变 value 属性的值。这样可以实现一些动态交互的效果。
<input type="range" min="0" max="100" id="rangeInput">
<script>
var rangeInput = document.getElementById('rangeInput');
rangeInput.value = 75;
</script>在上面的示例中，我们首先通过 JavaScript 获取了 id 为 rangeInput 的 <input> 元素，然后将其 value 属性的值设置为 75。这样就可以在页面加载时将滑块的初始位置设为 75。
监听 value 属性的变化
有时候，我们需要在滑块的值发生变化时进行一些操作，比如根据滑块的值实时更新页面中的其他元素。这时，我们可以通过监听 input 事件来实现。
// www.javascriptcn.com code example
<input type="range" min="0" max="100" id="rangeInput">
<p id="output"></p>
<script>
var rangeInput = document.getElementById('rangeInput');
var output = document.getElementById('output');
rangeInput.addEventListener('input', function() {
output.textContent = '当前值：' + rangeInput.value;
});
</script>在上面的示例中，我们通过监听 input 事件，当滑块的值发生变化时，更新页面中 id 为 output 的 <p> 元素的内容，显示当前滑块的值。
总结
通过本文的介绍，我们了解了 type="range" 的 <input> 元素的 value 属性的基本用法，以及如何通过 JavaScript 动态地改变和监听 value 属性的值。希望本文对你有所帮助！