UI thread blocking - All input elements stops working and seems inaccessible when input type range is disabled dynamically in chrome

Question

When I am trying to disable an input range on my page dynamically, all other input elements on my page stop working in chrome.

Here when I disable #mySlider, #chkBox and #myButton becomes inaccessible and does not trigger respective functions, even can't able to check the checkbox.

My chrome version: 31.0.1650.63 m

FIDDLE DEMO >>

HTML

 <input type="range" min="0" max="5" value="0" id="mySlider" onChange="checkMove(this)" />   <input type="checkbox" value="one" id="chkBox" ><br/>  <input type="button" id="myButton" value="Click Me" onClick="clickCheck();" /> 

SCRIPT

function checkMove(elem) {      var minVal = elem.value;      if (minVal == 2) {         elem.disabled = true;     } }  function clickCheck() {     alert("hi") } 

Answer 1

1) Since this seems to be a bug with Chrome. You can just hack it by simulating a disabled input, and just change the event to onmouseup for this to work

/* CSS */  #range {  position: relative     }  #range.disabled .cover {   display: block; }  #range.disabled input {  color: rgb(82,82,82); }  .cover {  width: 100%;  height: 100%;  background: transparent;  z-index:5;  position: absolute;  top: -5px;  bottom: 0;  right:0;  left: 0;  display: none; }  <!-- HTML --> <label id="range">   <input type="range" min="0" max="5" value="0" id="mySlider" onmouseup="checkMove(this)">   <div class="cover"></div> </label> <input type="checkbox" value="one" id="chkBox"> <br/> <input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />   // JAVASCRIPT var range = document.getElementById('range'); function checkMove (elem) {     var minVal = elem.value;     console.log(minVal)     if (minVal >= 2) {        range.className = 'disabled';     } } 

Working fiddle

Edit:

2) another way to hack this, is to avoid disabling it dynamically which is when the error occurs in the first place. have two range elements, one disabled and one abled. hide the disabled element while mirroring the value from the abled element.
when you want to disable the element, switch the two based on your condition.
check out this fiddle, the switch is smoove and not noticeable.

<div id="range">   <input type="range" min="0" max="5" value="0" id="mySlider" onchange="checkMove(this)">   <input type="range" disabled min="0" max="5" value="0" id="altSlider"> </div>  // Javascript var range = document.getElementById('range'),     alt   = document.getElementById('altSlider');  function checkMove(elem) {     var minVal = elem.value;     alt.value = minVal;     console.log(minVal)     if (minVal == 2) {       range.className = 'disabled';     } } 

CSS:

#range {  position: relative;  display: inline-block; } #range.disabled #altSlider {   opacity: initial; } #range.disabled #mySlider {  display: none; } #altSlider {  opacity: 0; } #mySlider {  z-index:5;  position: absolute;  top: 0;  left: 0; }