如何让<label>文本控制<input type="range">在最值间切换？

我希望点击<label>文本时，让<input type="range">控件在最小值（0）和最大值（1）之间切换。请问仅通过HTML或CSS能否实现该功能？是否需要使用JavaScript？以下是我的代码：

<label>
        This is the label text
        <input type="range" min="0" max="1" step="0.01" value="1" />
</label>

仅靠HTML和CSS无法实现这个点击切换range值的功能，必须借助JavaScript。原因很直接：

• HTML仅能处理基础的表单关联、默认行为，没有提供动态修改输入控件值的逻辑能力；
• CSS负责样式渲染，即便能通过伪类实现视觉状态变化，也无法修改DOM元素的value属性这类数据层面的内容。

实现方案（JavaScript） #

给label绑定点击事件，判断当前range的value值，直接切换为0或1即可：

<label id="rangeToggleLabel">
        This is the label text
        <input type="range" min="0" max="1" step="0.01" value="1" id="targetRange" />
</label>

<script>
const toggleLabel = document.getElementById('rangeToggleLabel');
const targetRange = document.getElementById('targetRange');

toggleLabel.addEventListener('click', (e) => {
    // 避免点击range控件本身时触发切换逻辑
    if (e.target !== targetRange) {
        targetRange.value = targetRange.value == 1 ? 0 : 1;
    }
});
</script>

补充说明 #

• 给元素添加ID是为了精准获取目标节点，也可以使用类选择器、属性选择器等替代；
• 事件中判断e.target是为了避免用户拖动滑块时误触发切换，确保仅点击label文本区域时生效。

内容的提问来源于stack exchange，提问作者Mysterius