Question

我使用3个滑块，最大值= 100 min = 0，第一个是主体，其他两个条形值不能高于或等于第一个，第三个值可以＆＃ 39; t高于或等于第二个。我不知道它是否有操作员或功能来限制最小最大范围之间的值。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div>
Foundations
<input type="range" name="s1" min="0" max="100"  id="bar1" value="0" oninput="mover1();">

</div>
<div>
Walls
<input type="range" name="s2" min="0" max="100"  id="bar2" value="0" style="margin-left: 1.9em;" >

</div>
<div>
Roof
<input type="range" name="s3" min="0" max="100" id="bar3" value="0" style="margin-left: 2.7em;" >
</div>
</body>
</html>

＆＃13;

Answer 1

您可以通过将滑块的max属性设置为上一个滑块的value属性来实现。如果你对任何一个滑块（除了第一个滑块）进行任何更改，你都可以做到这一点，你将获得所需的效果：

＆＃13;

var sliders = Array.from(document.querySelectorAll('input[type=range]'));
sliders.forEach( slider => slider.addEventListener('change', updateSliders));

function updateSliders() {
    sliders.reduce( (prev, curr) => {
        curr.max = prev.value - 1;
        return curr;
    });
}

// Optionally show the value next to the slider:
var values = Array.from(document.querySelectorAll('.value'));
sliders.forEach( slider => slider.addEventListener('change', displayValue));

function displayValue() {
    sliders.forEach( (curr, i) => values[i].textContent = curr.value );
}
displayValue();

＆＃13;

<table><tr>
    <td>Foundations</td>
    <td><input type="range" name="s1" min="0" max="100" id="bar1" value="0"></td>
    <td class="value"></td>
</tr><tr>
    <td>Walls</td>
    <td><input type="range" name="s2" min="0" max="100" id="bar2" value="0"></td>
    <td class="value"></td>
</tr><tr>
    <td>Roof</td>
    <td><input type="range" name="s3" min="0" max="100" id="bar3" value="0"></td>
    <td class="value"></td>
</tr></table>

＆＃13;

Answer 2

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script>
    var ranges;
    window.onload = function() {
      ranges = document.querySelectorAll("[id^=bar]");
    }

    function mover1() {
      if (+ranges[1].value >= ranges[0].value) {
        ranges[1].value = +ranges[0].value - 1
      }
      if (+ranges[2].value >= ranges[1].value) {
        ranges[2].value = +ranges[1].value - 1
      }
    }
  </script>
</head>

<body>
  <div>
    Foundations
    <input type="range" name="s1" min="0" max="100" id="bar1" value="0" oninput="mover1();">

  </div>
  <div>
    Walls
    <input type="range" name="s2" min="0" max="100" id="bar2" value="0" oninput="mover1();">
    <!-- style="margin-left: 1.9em;" -->
  </div>
  <div>
    Roof
    <input type="range" name="s3" min="0" max="100" id="bar3" value="0" oninput="mover1();">
    <!-- style="margin-left: 2.7em;" -->
  </div>
</body>

</html>

Answer 3

您可以这样做：

<div id="banner" name="RotateBanner"><img src="Images/banner/1.jpg" /></div>

纯javascript滑块限制

3 个答案: