HTML |

<input type="range"> 是 HTML 中的一个用户输入元素类型。该元素允许用户以滑块形式在一定范围内选择一个值。

基本属性

• type：必需属性，值必须为 "range"。
• name：该元素的名称。
• id：该元素的 ID。
• min：指定滑块可选的最小值，默认为 0。
• max：指定滑块可选的最大值，默认为 100。
• step：指定滑块每次移动的大小。
• value：指定滑块的初始值。

使用示例

基本用法

<label for="slider">选择一个数字：</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="1">

输出：

选择一个数字：

设置初始值

<label for="slider">选择一个数字：</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="1" value="50">

输出：

选择一个数字：

用 JS 获取滑块的值

<label for="slider">选择一个数字：</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="1" value="50">
<p id="value"></p>
<script>
  const slider = document.getElementById('slider');
  const value = document.getElementById('value');
  slider.addEventListener('input', () => {
    value.textContent = slider.value;
  });
</script>

输出：

选择一个数字：

浏览器支持

<input type="range"> 在所有主流浏览器中得到支持，包括 Chrome、Safari、Firefox 和 Edge。但是 IE 不支持该元素。