另外一种选择数字的方式是使用滑块（slider）。你在买房网站等网站上经常看到这种情况，你想设置一个最高的房产价格来进行过滤。让我们看一个现场示例来说明这一点：

从使用上来说，滑块的准确性不如文本字段。因此，它们被用来挑选精确值不一定那么重要的数字。

在 元素中使用 range 作为属性 type 的值，就可以创建一个滑块，滑块可以通过鼠标、触摸，或用键盘的方向键移动。

正确配置滑块组件非常重要。推荐分别配置 min (en-US)、max (en-US) 和 step (en-US) 属性来设置滑块的最小值、最大值和增量值。

我们来看看示例背后的代码，这样你就可以看到它是如何完成的。首先是基本的 HTML 代码：

html

本示例创建了一个其取值为 50000 到 500000 之间的滑块，每次的增量值是 100。我们使用 value 属性设定了此滑块的默认值为 250000。

使用滑块的一个问题是，它们不提供任何种类的视觉反馈来说明当前的值是什么。这是我们附加了一个包含当前值输出的 元素的原因。你可以在任何元素内显示一个输入值或一个计算的输出值，但是 是特殊的，就像 那样，它可以指定 for 属性，允许你将它与输出值来自的一个或多个元素联系起来。

要真正显示当前值，并在其变化时更新，你必须使用 JavaScript，这相对容易做到：

js

这里我们将 range 输入元素和 output 元素存为了两个变量。然后我们马上将 output 的 textContent 属性设置为 input 的 value 。最终，我们设置了一个事件监听器，确保每次范围滑块移动时，output 的 textContent 总是可以及时更新为新值。

备注： 在 CSS Tricks 网站上有一篇关于该主题的很好的教程：The Output Element。