Javascript/html：2つの入力範囲フィールドバランススケール

Question

これらの2つの入力範囲フィールドのバランスを最大100にするにはどうすればよいですか？最初の入力フィールド範囲を移動すると、バランスのように両面に比例するはずです。

はここでも他のスライダーの値と100 - this.valueに他の<output>を変更、同じスライダー用<output>フィールドの変更に加えて、あなたのinputハンドラでは私のコード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 "> 

Answer 1

です。各スライダ上の変更ハンドラを設定し

$("#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">