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


// 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;
}

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)