在 HTML 中添加滑块控件需要使用 <input> 元素，并设置 type="range" 属性。下面是一个简单的示例：
<label for="myRange">选择一个值：</label>
<input type="range" id="myRange" name="myRange" min="0" max="100" step="1" value="50">在上面的代码中，type="range" 属性表示创建一个滑块控件，min 和 max 属性分别表示控件允许的最小值和最大值，step 属性表示控件每次改变的步长，value 属性表示控件的默认值。
此外，您还可以使用 oninput 属性添加一个 JavaScript 函数，以便在用户拖动滑块时触发某些事件。例如，以下示例将每次滑块值更改时将新值显示在页面上：
<label for="myRange">选择一个值：</label>
<input type="range" id="myRange" name="myRange" min="0" max="100" step="1" value="50" oninput="showValue(this.value)">
<p>当前值：<span id="rangeValue">50</span></p>
<script>
function showValue(newValue) {
document.getElementById("rangeValue").innerHTML = newValue;
}
</script>在上面的示例中，oninput="showValue(this.value)" 将 showValue 函数绑定到滑块的 oninput 事件上，this.value 表示当前滑块的值。showValue 函数将新值显示在页面上的 <span> 元素中。
