输入范围已连接

Question

我不知道如何连接两个输入范围。

$('#SF_range').on('input', function() {
    console.log('SDBX = ' + this.value + ' | Seafile = ' + $('#SDBX_range').val());
    var add = (this.max - this.value) + $('#SDBX_range').val();
    $('#SDBX_range').val(add);
    console.log('SDBX = ' + this.value + ' | Seafile = ' + $('#SDBX_range').val()); 
});
$('#SDBX_range').on('input', function() {
    var add = (this.max - this.value) + $('#SF_range').val();
    $('#SF_range').val(add);
    console.log('SDBX = ' + this.value + ' | Seafile = ' + $('#SF_range').val());
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SDBX
<input type="range" min="0" max="400" value="400" class="mdl-slider mdl-js-slider" id="SDBX_range">
                                    
Coffre
<input type="range" min="0" max="400" value="100" class="mdl-slider mdl-js-slider" id="SF_range">

目标是将一个输入的值传递给另一个。

Answer 1

我不知道我是否正确理解了您的问题...

var $sf = $('#SF_range');
var $sdbx = $('#SDBX_range');

$sf.on('input', function() {
  $sdbx.val(this.max - this.value);
  console.log('SDBX =', $sdbx.val(), ' | Seafile = ', $sf.val());
});
$sdbx.on('input', function() {
  $sf.val(this.max - this.value);
  console.log('SDBX =', $sdbx.val(), ' | Seafile = ', $sf.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SDBX
<input type="range" min="0" max="400" value="400" class="mdl-slider mdl-js-slider" id="SDBX_range">
                                    
Coffre
<input type="range" min="0" max="400" value="100" class="mdl-slider mdl-js-slider" id="SF_range">