Question

如何使这两个输入范围字段平衡到最大值100，当我移动第一个输入字段范围时，第二个应该调整，反之亦然。我的意思是它应该像平衡尺度一样成比例。

//First input range

<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range"  name="judge_range" id="judge_range" min="0" max="100" value="75" oninput="judge_rangeOutput.value = judge_range.value"><br/>


//Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25" oninput="preJudge_rangeOutput.value = prejudges_range.value ">

Answer 1

在input处理程序中，除了更改同一个滑块的<output>字段外，还要更改另一个滑块的值，将另一个<output>的值更改为100 - this.value

＆＃13;

$("#judge_range").on("input", function() {
  $("#judge_rangeOutput").val(this.value);
  $("#prejudges_range").val(100 - this.value);
  $("#preJudge_rangeOutput").val(100 - this.value);
});
$("#prejudges_range").on("input", function() {
  $("#preJudge_rangeOutput").val(this.value);
  $("#judge_range").val(100 - this.value);
  $("#judge_rangeOutput").val(100 - this.value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75">
<br/>Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25">

＆＃13;

Javascript / html：两个输入范围字段余额比例

1 个答案: