html5中的input新属性range使用记录

下面是关于 "HTML5中的input新属性range使用记录" 的详细攻略：

简介

<input type="range"> 是 HTML5 中新添加的表单元素之一，它用于让用户在给定的范围内选择一个数值，类似于滑动条的效果。本文将介绍 <input type="range> 的使用方法。

属性

<input type="range> 可以使用以下属性：

• min：规定可选取的最小值
• max：规定可选取的最大值
• step：规定取值的步长
• value：规定默认选取的值

代码示例

下面是两个 <input type="range> 的示例：

示例1

<label for="range">选择范围：</label>
<input type="range" id="range" name="range" min="1" max="100" step="5" value="50">
<p>当前值： <span id="value"></span></p>

<script>
  var range = document.getElementById('range');
  var value = document.getElementById('value');

  range.addEventListener('input', function() {
    value.innerHTML = range.value;
  });
</script>

在这个示例中，我们创建了一个 <input type="range>，可选的最小值为 1，最大值为 100，每次选择的步长为 5 个单位，初始默认值为 50。我们还在下方添加了一个 <span> 元素，用于实时显示当前选择的值。在这个示例中，我们使用了 addEventListener，监听了 input 事件。每次滑块的值发生改变后，就会更新显示当前值的 <span> 元素。

示例2

<label for="range">选择音量：</label>
<input type="range" id="range" name="range" min="0" max="1" step="0.1" value="0.5">
<audio src="music.mp3" id="music"></audio>

<script>
  var range = document.getElementById('range');
  var music = document.getElementById('music');

  range.addEventListener('input', function() {
    music.volume = range.value;
  });
</script>

在这个示例中，我们创建了一个 <input type="range>，可选的最小值为 0，最大值为 1，每次选择的步长为 0.1，初始默认值为 0.5。我们还在页面中添加了一个 <audio> 元素，用于播放音乐。当用户拖动滑块时，我们监听了 input 事件，并根据滑块的值设置了音乐的音量。

结论

通过这两个简单的示例，我们可以看到 <input type="range> 的使用方法。我们可以根据需求调整它的属性，制作出各种不同的滑动条效果。