input type range with focus method in firefox not woking

Question

In HTML code we are using input type range but the problem is when we use focus event then in Firefox its not working properly.

here is my code

var p = document.getElementById("price"),
  res = document.getElementById("result");
test = document.getElementById("test");

p.addEventListener("input", function() {
  test.focus();
  test.value = "$" + p.value;
}, false);

#result {
  font-size: 2em;
}

<div style="margin-top: 1em">
  <h2>Price</h2> $51
  <input id="price" type="range" min="51" max="360" value="" />$360
</div>
<input type="text" name="test" value="" id="test" />

slider is not sliding smoothly in mozilla but its working fine in chrome

Whats the issue? Its working on firefox, "range" element behave different in firefox — Satpal
please check this fiddle in mozilla jsfiddle.net/itruser/n7u5960f/1 slider is not working smothly while in chrome slider working fine — NIKHIL PARIHAR
I have made some improvements in my answer, please have a look. — Rehan Haider

Rehan Haider Rehan Haider · Accepted Answer · 2017-09-29T07:01:44

When focus is shifted to input field then you will not be able to slide the slider. Use following code to resolve it

var p = document.getElementById("price"),
    res = document.getElementById("result"),
    test=document.getElementById("test"),
    timeout = null;

p.addEventListener("input", function() 
{
   test.value = "$" + p.value;
   clearTimeout(timeout);
   timeout = setTimeout(function(){ test.focus(); }, 400);
}, false);

#result {
    font-size: 2em;
}

<div style="margin-top: 1em">
    <h2>Price</h2>
    $51<input id="price" type="range" min="51" max="360" value="" />$360
</div>
<input type="text" name="test" value="" id="test"/>

Use setTimeout to focus on input field after a pause when slider was clicked

input type range with focus method in firefox not woking

2 Answers