Input Range form 属性

基本用法

要创建一个输入范围，我们只需要简单地在<input>元素中指定type="range"即可：

<input type="range" name="volume" min="0" max="100" step="1">

上面的代码创建了一个名为volume的输入范围，其取值范围从 0 到 100，步长为 1。用户可以通过拖动滑块来选择所需的数值。

属性说明

• min：指定输入范围的最小值。
• max：指定输入范围的最大值。
• step：指定输入范围的步长，即每次拖动滑块所改变的数值。
• value：指定输入范围的初始值。
• disabled：禁用输入范围，使其不可用。

事件处理

输入范围也可以通过 JavaScript 来处理用户的交互。例如，我们可以监听input事件来实时显示用户选择的数值：

<input type="range" name="volume" min="0" max="100" step="1" oninput="updateValue(this.value)">
<p>当前值：<span id="currentValue"></span></p>

<script>
  function updateValue(value) {
    document.getElementById('currentValue').innerText = value;
  }
</script>

上面的代码中，当用户拖动滑块时，updateValue函数会将当前值实时更新到页面上。

样式定制

输入范围的样式可以通过 CSS 进行定制。例如，我们可以改变滑块的颜色、大小等样式：

// www.javascriptcn.com code example
<style>
  input[type="range"] {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 10px;
    outline: none;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background-color: #007bff;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

<input type="range" name="volume" min="0" max="100" step="1">

在上面的代码中，我们通过 CSS 定制了输入范围的样式，使其更符合我们的设计需求。

总结

通过本文的介绍，我们学习了如何使用type="range"属性来创建输入范围表单元素，并了解了其常用属性和事件处理方式。同时，我们也学习了如何通过 CSS 来定制输入范围的样式。希望本文对你有所帮助！