Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Input Range onInput issue</title>
</head>
<body>
  <p>Try to click the slider, wait and release the mouse</p>
<input type="range" min="1" max="100" step="1">
  <div>0</div>
</body>
</html>
 
body{ font:18px Arial; }
input{ width:80%; }
div{ color:red;
  &::before{ content:'Event fired: '; color:#555; }
  &::after{ content:' times'; color:#555; }
}
 
var counter = document.querySelector('div');
document.querySelector('input').addEventListener('input', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers