How to detect shift key pressed on range input?

Question

I'm trying to synchronize two sliders when the shift key is pressed. However, the problem is that e.shiftKey is undefined for the range input event.

I tried using the onmousedown event, which does report e.shiftKey, but it doesn't set the range value correctly.

How can I detect if the shift key is being pressed on range input?

 $('input[type=range]').on("input",function(e){ $('#value').text(this.value); if(e.shiftKey){ var newValue = this.value; $('input[type=range]').each(function(){this.value=newValue}); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <input type="range"> <input type="range"> <span id="value"></span> </body> </html>

(jQuery is optional, just using it for convenience)

Answer 1

You should check for the shiftKey regardless the click on the range input:

 var sync = false; $(document).on('keydown', function(e) { if (e.shiftKey) { sync = true; } }); $(document).on('keyup', function(e) { if (e.shiftKey == false) { sync = false; } }); $('input[type=range]').on("input",function(e){ $('#value').text(this.value); if (sync) { var newValue = this.value; $('input[type=range]').each(function(){this.value=newValue}); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <input type="range"> <input type="range"> <span id="value"></span> </body> </html>

How to detect shift key pressed on range input?

Question

1 answers

solution1
1 ACCPTED 2017-03-23 01:20:35

How to detect shift key pressed on range input?

Question

1 answers

solution1 1 ACCPTED 2017-03-23 01:20:35

solution1
1 ACCPTED 2017-03-23 01:20:35