如何使这两个输入范围字段平衡到最大 100,当我移动第一个输入字段范围时,第二个输入字段范围也应该调整,反之亦然。我的意思是它应该像天平一样成正比。
这是我的代码 https://jsfiddle.net/jsm4s2oz/1/
//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 ">
最佳答案
在你的input
处理程序,除了更改 <output>
同一 slider 的字段,还更改另一个 slider 和另一个的值 <output>
至 100 - this.value
.
$("#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);
});
<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">
关于Javascript/html : Two input range field balance scale,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39070506/