Input range connected

158

November 20, 2018, at 05:30 AM

I can't figure out how I can connect two input range.

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

The goal is to transmit the value of one input to another.

Answer 1

I don't know if I understood correctly your issue...

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">

POPULAR ONLINE

Listen to multiple events on the same element to fire

Slim route order declaration and route parameter

PHP: measure TTFB (Time To First Byte)

RestEasy client throwing exceptions

Codeignier some page which is have parameters on index method is not working

How can we define 'PlacesServiceStatus.OK' for adding markers of locations on customized google maps in laravel 5.7?

Have there any alternative defined function in laravel 57? I have tried my best but fail to get an answer

117

PHP

Include PHP and CSS files -> relative path

Hello how can I include PHP and CSS files from another directory to the current file? Open Image

198

PHP

My website's cache stopped working randomly

On my website some user started to experience very slow page loading on PC but fine on cellphoneI tried going into Incognito mode, it was very slow even thought before (2-4 weeks) I went on my site on Incognito mode and it was working fine

143

PHP

Losing files with Xampp program

I was using Xampp to create a website via Dreamweaver and unfortunately Xampp stop and change Ip address from 192168

181