Input Range type 属性

在Web开发中，<input> 标签是用来创建各种表单元素的标签之一。其中，type 属性可以用来指定输入框的类型。在本篇文章中，我们将重点介绍 range 类型的输入框，即 <input type="range">。

什么是 range 输入框

range 输入框是一种用于选择范围值的输入框，用户可以通过拖动滑块来选择一个数值。这种输入框非常适合用于调整音量、亮度等需要连续调整数值的场景。

语法

range 输入框的基本语法如下：

<input type="range" id="myRange" name="myRange" min="0" max="100" value="50">

• type="range"：表示这是一个 range 类型的输入框。
• id：用于标识该输入框，方便通过 JavaScript 操作。
• name：用于提交表单时作为参数名。
• min：指定可选取值的最小值。
• max：指定可选取值的最大值。
• value：指定初始值。

示例

下面是一个简单的示例，展示了一个 range 输入框和一个用于显示当前值的 <span> 元素：

// www.javascriptcn.com code example
<input type="range" id="myRange" name="myRange" min="0" max="100" value="50">
<span id="rangeValue">50</span>

<script>
    const rangeInput = document.getElementById('myRange');
    const rangeValue = document.getElementById('rangeValue');

    rangeInput.addEventListener('input', function() {
        rangeValue.textContent = rangeInput.value;
    });
</script>

在这个示例中，我们通过监听 input 事件来实时更新 <span> 元素中的数值，以反映 range 输入框当前的值。

样式定制

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

// www.javascriptcn.com code example
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #d3d3d3;
    border-radius: 5px;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #2196F3;
    border-radius: 50%;
    cursor: pointer;
}

通过上述 CSS 样式，我们可以自定义 range 输入框的外观，使其更符合项目的设计需求。

总结

通过本文的介绍，你应该对 range 输入框有了更深入的了解。range 输入框在 Web 开发中有着广泛的应用，希望本文能够帮助你更好地使用和定制这一功能强大的表单元素。