1. HTML DOM Input Range对象简介
HTML DOM Input Range对象是JavaScript中用于控制滑块的对象，它可以让用户通过拖动滑块在一定的范围内选择一个值。这个滑块可以用在表单中，也可以用来设计一些交互式的页面组件。
HTML DOM Input Range对象能够完成如下任务：
创建滑块控件
定义滑块的取值范围，包括最小值和最大值
定义滑块的步长
定义滑块的默认值
定义滑块的当前值
获取用户选择的值
2. 创建HTML DOM Input Range对象
创建HTML DOM Input Range对象很简单，可以使用一般的HTML标签 <input>，其中type属性的值为 "range"。下面是一个创建滑块的范例：
<input type="range">
这个范例演示了如何创建一个简单的滑块，但是它的取值范围比较小，只有0到100之间。接下来，我们会学习如何通过JavaScript来控制滑块的取值范围和步长，以及如何设置默认值。
3. 滑块的属性和方法
滑块有很多有用的属性和方法，下面我们分别介绍。
3.1 属性
下面是一些常用的滑块属性：
.value：获取或设置滑块的当前值
.min：获取或设置滑块的最小值
.max：获取或设置滑块的最大值
.step：获取或设置滑块的步长
.defaultValue：获取或设置滑块的默认值
3.2 方法
下面是一些常用的滑块方法：
.focus()：把输入焦点设置到滑块上
.blur()：从滑块上移除焦点
4. 控制滑块的取值范围
我们可以通过设置滑块的最小值（min）和最大值（max）来控制滑块的取值范围。下面是一个范例，用于创建一个取值范围在-50到50之间、步长为5的滑块：
<input type="range" min="-50" max="50" step="5">
在此范例中，我们使用了 min 和 max 属性来定义滑块的取值范围，使用 step 属性来定义滑块的步长。
5. 设置滑块的默认值
滑块的默认值可以通过 defaultValue 属性来设置。下面的范例创建了一个初始值为25、取值范围在0到100之间、步长为1的滑块：
<input type="range" min="0" max="100" step="1" defaultValue="25">
6. 获取滑块的值
通过使用 .value 属性，我们可以获取滑块的当前值。下面是一个范例，它演示了如何获取滑块的值并将其显示在一个段落中：
<input type="range" min="0" max="100" step="1" oninput="updateValue(this.value)">
<p id="output"></p>
<script>
function updateValue(val) {
document.getElementById("output")[xss_clean] = "当前值为：" + val;
}
</script>
在此范例中，我们使用了 oninput 事件来监听滑块值的改变，updateValue() 函数接收滑块的当前值，然后将其显示在 <p> 标签中。
7. 实现滑块控制页面元素
HTML DOM Input Range对象非常有用，我们不仅可以用它来创建滑块，还可以通过 JavaScript 来控制元素的变化。下面是一个范例，在它的滑块上移动时会改变元素的背景颜色：
<input type="range" min="0" max="255" step="1" oninput="updateColor(this.value)">
<div id="box"></div>
<script>
function updateColor(val) {
var box = document.getElementById("box");
box.style.backgroundColor = "rgb(" + val + "," + val + "," + val + ")";
}
</script>
在此范例中，我们使用了 oninput 事件来监听滑块值的改变，updateColor() 函数接收滑块的当前值，然后将其作为颜色的RGB值来设置 <div> 元素的背景颜色。
8. 总结
HTML DOM Input Range对象是一个非常有用的JavaScript对象，它可以让我们创建交互式的页面元素，实现控制页面元素的效果，比如：控制背景颜色、调整音量等。在开发web应用时，经常需要使用滑块控制器，所以学会使用它是很重要的。