How can I focus input on a range slider with javascript?

Question

I have inputs with user can put value directly in it or choose it with a range slider. What I want is that when a user chooses the range slider it focuses at the same time the input it controls.

So I have these inputs:

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

This js that makes the values of the range slider go to the input:

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;}

Is there a way when to make the input focus/unfocus on range slider's use?

Answer 1

No you can not, because that will only remove your cursor into input filed and slider will lose focus, that was focus is, you can not focus on two items in same time:

EXAMPLE:

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
  document.getElementById("a1").focus();
  }

.active  {
  border-color:red;
  border-style: inset;
  border-width: 1px;}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

So I would suggest mimicking focus:

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
  document.getElementById("a1").classList.add("active");
  }

.active  {
  border-color:blue;
  border-style: inset;
  border-width: 2px;}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

EDIT:

If your inputs calculations are controlled by focus (BTW they can do on-change, witch would be more optimal in my opinion from what I understand the situation), you can set separate event where on mouse up in slider will trigger focus on your input;

While you are using slider focus of course is on slider, but soon as you release it, you can switch to input:

EXAMPLE:

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
}

opt_1.onmouseup = function() {
  document.getElementById("a1").focus();
}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

Also from your other link in comment I see you are using onfocusout event with is very hard to trigger, so I would suggest using blur:

(but all of this seems redundant if you just simply use on change...)

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
}


opt_1.onmouseup = function() {
  document.getElementById("a1").focus();
  setTimeout(function() {
    console.log(true)
    opt_1.focus();
  }, 1000);
}


document.getElementById("a1").onblur = function() {
  console.log("blur out happend")
};

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>