CODEWITHSUNDEEP
javascripthtmlfirefoxfocus
NIKHIL PARIHAR
NIKHIL PARIHAR

Reputation: 522

input type range with focus method in firefox not woking

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

Upvotes: 1

Views: 683

Answers (2)

Rehan Haider
Rehan Haider

Reputation: 1061

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

Upvotes: 1

Kreato
Kreato

Reputation: 13

Try updating your Firefox browser, because I ran your code and the slider is running smoothly on both the browsers(Chrome and Firefox) on my side and in your code you haven't given a reference to the JavaScript code. I assume that was present in your main code. Tell me if you are facing the problem even after updating.

Upvotes: 0

Related Questions