Run task only when CTRL and mouse are pressed

Question

I need to move the <input type="range"> only when the CTRL and the left mouse click are pressed. I managed to do this with this code:

 $(document).keydown(function(e) {
  if (e.which == 17) {
    document.onmousedown = function() {
      document.querySelector('body').addEventListener('mousemove', ouvinteBrilho, false);
      return false;
    }
  }
})

The problem is that even after releasing the CTRL it keeps moving if I keep holding the mouse click. I have tried to do it this way and without success:

$(document).keyup(function(e) {
  if (e.which == 17) {
    document.querySelector('body').removeEventListener('mousemove', ouvinteBrilho);
  }
})

Or:

document.onmouseup = function() {
  document.querySelector('body').removeEventListener('mousemove', ouvinteBrilho);
  return false;
}

Edit: When I only do it with CTRL works perfectly:

$(document).keydown(function(e) {
  if (e.which == 17) {
    document.querySelector('body').addEventListener('mousemove', ouvinteBrilho, false);
  }
})

$(document).keyup(function(e) {
  if (e.which == 17) {
    document.querySelector('body').removeEventListener('mousemove', ouvinteBrilho);
  }
})

Answer 1

One possibility is to add an event on document to check when the ctrl is pressed and released. In these moments you can enable/disable the input.

Note: to test the example below using the button Executar you need to focus on the generated iframe. For this, just click on a blank area below the input, for example. Then it will only be possible to move the input with the ctrl pressed. If you copy this snippet to a file .html and run on your machine, when opening the file in the browser the function will already be available. The problem here is the focus of the window that is initially on this page and not on iframe.

const myInput = document.querySelector('#myInput');
myInput.setAttribute('disabled', 'disabled');

window.addEventListener('keydown', function(e) {
  if (!e.ctrlKey) {
    myInput.setAttribute('disabled', 'disabled');
  } else {
    myInput.removeAttribute('disabled');
  }
});

window.addEventListener('keyup', function(e) {
  if (!e.ctrlKey) {
	myInput.setAttribute('disabled', 'disabled');
  } else {
	myInput.removeAttribute('disabled');
  }
});

<input type="range" id="myInput" />

Answer 2

Can do using two events: keydown and keyup.

The first will check if the pressed key is the CTRL (Cód. 17) and cancels the events that block the input, and the second (which means the key has been released) will call a function that blocks the input. I put a class .range so that eventually you can use in multiple inputs at the same time.

For the snippet below to work, click on any area of it first:

$(document).on("keydown keyup", function(e){
   if(e.which == 17 && e.type == "keydown") $(".range").off("mousemove mousedown");
   if(e.which == 17 && e.type == "keyup") bloqueia();
});

function bloqueia(){
   $(".range").on("mousemove mousedown", function(e){
      e.preventDefault();
   });
}

function ouvinteBrilho(){
   console.clear();
   console.log("brilho");
}

bloqueia(); // chama a função que bloqueia os inputs

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="range" type="range">
<br>
<input class="range" type="range">