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

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();" />// JAVASCRIPTvar 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>// Javascriptvar 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;}

Why don't you try jquery selectors to disable itHtml is <input type="range" min="0" max="5" value="0" id="mySlider" /> <input type="checkbox" value="one" id="chkBox" ><br/> <input type="button" id="myButton" value="Click Me" />

jquery

    jQuery(document).ready(function($){    $("#mySlider").change(function(){       var val = parseInt($(this).val());       var maxrange= parseInt($(this).attr("max"));        if(val>=2){        $(this).val(2);        $(this).attr("disabled", "true");           }        })        $("#chkBox, #myButton").click(function(){          alert("It Works!");        });     })    

I know the bug has been fixed in chrome... For sometime, but after reviewing the cause and fix implemented for the bug I thought I would provide a workaround if needed.

    // Replace the `elem.disabled = true;` with    setTimeout(function(){ elem.disabled = true; },0); 

The idea being we let the browser exit it's current event stream and then disable the input element.

The issue was essentially a catch-22, disable the input, and then update the range when the final event comes in, the problem was the element was now disabled and as such would never receive such an event, this left the browser hanging, and it never released the UI.

For more specifics checkout the patch provided in the link in the comment by @PrasanthKC above.