title: "pointer-events: none" on range-input
body: <p>I need to develop a range-input with from-to-values and used this as a basic:</p>
  
  <p><strong>Codepen Link:</strong> <a href="https://codepen.io/Manitoba/pen/ZWRjye?editors=1111" rel="nofollow noreferrer">https://codepen.io/Manitoba/pen/ZWRjye?editors=1111</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #666;
    margin: 100px 50px;
  }
  
  [slider] {
    position: relative;
    height: 14px;
    border-radius: 10px;
    text-align: left;
    margin: 45px 0 10px 0;
  }
  
  [slider] &gt; div {
    position: absolute;
    left: 13px;
    right: 15px;
    height: 14px;
  }
  
  [slider] &gt; div &gt; [inverse-left] {
    position: absolute;
    left: 0;
    height: 14px;
    border-radius: 10px;
    background-color: #CCC;
    margin: 0 7px;
  }
  
  [slider] &gt; div &gt; [inverse-right] {
    position: absolute;
    right: 0;
    height: 14px;
    border-radius: 10px;
    background-color: #CCC;
    margin: 0 7px;
  }
  
  [slider] &gt; div &gt; [range] {
    position: absolute;
    left: 0;
    height: 14px;
    border-radius: 14px;
    background-color: #1ABC9C;
  }
  
  [slider] &gt; div &gt; [thumb] {
    position: absolute;
    top: -7px;
    z-index: 2;
    height: 28px;
    width: 28px;
    text-align: left;
    margin-left: -11px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    background-color: #FFF;
    border-radius: 50%;
    outline: none;
  }
  
  [slider] &gt; input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 3;
    height: 14px;
    top: -2px;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
  }
  
  div[slider] &gt; input[type=range]::-ms-track {
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
  
  div[slider] &gt; input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: transparent;
    color: transparent;
  }
  
  div[slider] &gt; input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
    border: transparent;
  }
  
  div[slider] &gt; input[type=range]:focus {
    outline: none;
  }
  
  div[slider] &gt; input[type=range]::-ms-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0px;
    border: 0 none;
    background: red;
  }
  
  div[slider] &gt; input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0px;
    border: 0 none;
    background: red;
  }
  
  div[slider] &gt; input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0px;
    border: 0 none;
    background: red;
    -webkit-appearance: none;
  }
  
  div[slider] &gt; input[type=range]::-ms-fill-lower {
    background: transparent;
    border: 0 none;
  }
  
  div[slider] &gt; input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0 none;
  }
  
  div[slider] &gt; input[type=range]::-ms-tooltip {
    display: none;
  }
  
  [slider] &gt; div &gt; [sign] {
    opacity: 0;
    position: absolute;
    margin-left: -11px;
    top: -39px;
    z-index:3;
    background-color: #1ABC9C;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
  }
  
  [slider] &gt; div &gt; [sign]:after {
    position: absolute;
    content: '';
    left: 0;
    border-radius: 16px;
    top: 19px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top-width: 16px;
    border-top-style: solid;
    border-top-color: #1ABC9C;
  }
  
  [slider] &gt; div &gt; [sign] &gt; span {
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
  }
  
  [slider]:hover &gt; div &gt; [sign] {
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div slider id="slider-distance"&gt;
    &lt;div&gt;
      &lt;div inverse-left style="width:70%;"&gt;&lt;/div&gt;
      &lt;div inverse-right style="width:70%;"&gt;&lt;/div&gt;
      &lt;div range style="left:30%;right:40%;"&gt;&lt;/div&gt;
      &lt;span thumb style="left:30%;"&gt;&lt;/span&gt;
      &lt;span thumb style="left:60%;"&gt;&lt;/span&gt;
      &lt;div sign style="left:30%;"&gt;
        &lt;span id="value"&gt;30&lt;/span&gt;
      &lt;/div&gt;
      &lt;div sign style="left:60%;"&gt;
        &lt;span id="value"&gt;60&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="range" tabindex="0" value="30" max="100" min="0" step="1" oninput="
    this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
    var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
    var children = this.parentNode.childNodes[1].childNodes;
    children[1].style.width=value+'%';
    children[5].style.left=value+'%';
    children[7].style.left=value+'%';children[11].style.left=value+'%';
    children[11].childNodes[1].innerHTML=this.value;" /&gt;
  
    &lt;input type="range" tabindex="0" value="60" max="100" min="0" step="1" oninput="
    this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
    var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
    var children = this.parentNode.childNodes[1].childNodes;
    children[3].style.width=(100-value)+'%';
    children[5].style.right=(100-value)+'%';
    children[9].style.left=value+'%';children[13].style.left=value+'%';
    children[13].childNodes[1].innerHTML=this.value;" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works great However except in MS IE and Edge, I can't drag the thumbs. I believe it's due to:</p>
  
  <pre><code>pointer-events: none;
  </code></pre>
  
  <p>on the actual range-input.</p>
  
  <p>Any hint would be appreciated. Thanks.</p>