如何使 <label> 文本启用或禁用 <input> 范围？

Question

我希望当我单击标签时范围能够自行切换（最小/最大）。 仅使用 HTML 或 CSS 可以吗？我需要一些JS吗？

我有以下代码：

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

代码：https://jsfiddle.net/gjxf60s8/

Answer 1

你需要使用js。

试试这个代码。

document.addEventListener('DOMContentLoaded', function() {
  var label = document.querySelector('label');
  var rangeInput = document.querySelector('input[type="range"]');
  
  label.addEventListener('click', function() {
    // Toggle between min and max values
    if (rangeInput.getAttribute('min') === '0') {
      rangeInput.setAttribute('min', '1');
      rangeInput.setAttribute('max', '100');
    } else {
      rangeInput.setAttribute('min', '0');
      rangeInput.setAttribute('max', '1');
    }
  });
});