title: Input type range slider thumb display fix
body: <p>few days ago I've asked for help with styling <strong>input type range</strong> element. Everything works just fine except one thing. Slider thumb is not displaying correctly.</p>
  <p><strong>My goal is to display it like this.</strong></p>
  <p><a href="https://i.stack.imgur.com/shvQk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shvQk.png" alt="enter image description here" /></a></p>
  <p><strong>But this is the closest to my goal I can do.</strong></p>
  <p><a href="https://i.stack.imgur.com/ZA07z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZA07z.png" alt="enter image description here" /></a></p>
  <p>There are two problems with that slider thumb. As you can see it's cropped and not standing out like in my goal picture. I know that it is caused by <strong>overflow : hidden</strong>. But that overflow:hidden is there on purpose ,because that is the approach I've got as a advice on my last question. Next problem is with color and box-shadow of slider thumb. I've switched it to red so it's more visible when I tried to fix the first problem. But if I switch it back to white, and try to add box shadow to it to achieve that effect which is in goal picture ,it will overwrite old box-shadow,which is making that white <strong>'selected'</strong> effect.</p>
  <p><a href="https://i.stack.imgur.com/eqUsX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eqUsX.png" alt="enter image description here" /></a></p>
  <p>Does anybody encountered this type of problem or have another solution for this ? Thank you :)</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:#ccc;
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      input[type='range'] {
        width: 100%;
        -webkit-appearance: none;
        background-color: #ee7b82;
        border-radius: .3em;
        position: relative;
      }
      
      input[type='range']::-webkit-slider-runnable-track {
          height: .35em;
          border: none;
          border-radius: 3px;
          color: white;
          overflow: hidden;
      }
      
      input[type='range']::-webkit-slider-thumb {
          -webkit-appearance: none;
          cursor: ew-resize;
          box-shadow: -100em 0 0 100em white;
          -webkit-appearance: none;
          border: none;
          height: 1.1em;
          width: 1.1em;
          border-radius: 50%;
          background:red;
  
          /* 
          Box-shadow to slider thumb,when color is changed to white,so it'll be visible, but it rewrites old box-shadow ,which is making that selected effect.
          
           background: white;
          -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
          -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
          box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
          */
          margin-top: -.2em;
      }
  
      input[type=range]:focus {
          outline: none;
      }
  }
  
  /*MOZ*/
  input[type="range"]::-moz-range-progress {
      background-color: white; 
  }
  
  input[type="range"]::-moz-range-track {  
      background-color: #ee7b82;
  }
  
  /*IE*/
  input[type="range"]::-ms-fill-lower {
      background-color: white; 
  }
  
  input[type="range"]::-ms-fill-upper {  
      background-color: #ee7b82;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div className="range"&gt;
              &lt;p className="heading"&gt;HEIGHT&lt;/p&gt;
              &lt;input type="range"&gt;&lt;/input&gt;
  
              &lt;p className="heading"&gt;WEIGHT&lt;/p&gt;
              &lt;input type="range"&gt;&lt;/input&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>