A Pen by David Scott Kirby.

Gecko+Trident+Webkit-Slider-Nirvana..markdown

Gecko+Trident+Webkit Slider Nirvana.

IE10 (ms-thumb), FF (moz-range-thumb) & Chrome (webkit-slider-thumb) in pixel-perfect harmony.

A Pen by David Scott Kirby on CodePen.

License.

index.html

<div class="modal">  
    <input type="range" max="100" min="0" step="1" value="50" />
</div>

style.css

:root {
  height: 100%;
  width: 100%;
}

:root * {
  -moz-appearance: none;
  -webkit-appearance: none;   
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;    
  background: transparent;  
  box-sizing: border-box;
  box-shadow: none;
  list-style: none;
  outline: none;
  border: none;
  color: white;
  margin: 0;
  padding: 0;  
}

html {
  background: #45484d -webkit-radial-gradient(#45484d 0%, #000 100%);
  background: #45484d -moz-radial-gradient(#45484d 0%, #000 100%);  
  background: #45484d radial-gradient(#45484d 0%, #000 100%);
}

input[type="range"] {
  width: 100%;
  height: 48px;
  height: 3rem;
}

::-ms-fill-lower,
::-ms-fill-upper,
::-ms-ticks-after,
::-ms-ticks-before,
::-ms-tooltip {
    display:none;
}

::-ms-track {    
    height:16px;
    height:1rem;    
    border-width: 0rem;
    border-radius: 8px;
    border-radius: 0.5rem;    
    background-color:white;
    box-shadow: inset rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: inset rgba(0,0,0,0.5) 0 0.25rem 0.5rem;  
    color: transparent;
}

::-ms-thumb { 
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
    border-width: 0;
    border-radius: 50%;    
    background: #F0F0F2 linear-gradient(#F0F0F2, #C2C3CB);
    box-shadow: rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: rgba(0,0,0,0.5) 0 0.25rem 0.5rem;
}
::-moz-range-track {    
    height:16px;
    height:1rem;    
    border-width: 0;
    border-radius: 8px;
    border-radius: 0.5rem;
    background-color:white;
    box-shadow: inset rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: inset rgba(0,0,0,0.5) 0 0.25rem 0.5rem;
}
::-moz-range-thumb {
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
    border-width: 0;
    border-radius: 50%;    
    background: #F0F0F2 linear-gradient(#F0F0F2, #C2C3CB);
    box-shadow: rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: rgba(0,0,0,0.5) 0 0.25rem 0.5rem;
}
::-webkit-slider-runnable-track {          
    height:16px;
    height:1rem;    
    border-width: 0;
    border-radius: 8px;
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: inset rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: inset rgba(0,0,0,0.5) 0 0.25rem 0.5rem;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -8px;
    margin-top: -0.5rem;
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;    
    border-width: 0;
    border-radius: 50%;   
    background: #F0F0F2 linear-gradient(#F0F0F2, #C2C3CB);
    box-shadow: rgba(0,0,0,0.5) 0 4px 8px;
    box-shadow: rgba(0,0,0,0.5) 0 0.25rem 0.5rem;
}

.modal {
  width: 24rem;    
  padding: 2rem;
  margin: 8rem auto;     
  border-radius: 0.5rem;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
  background: #45484d -webkit-linear-gradient(#292929 0%, #111 100%);
  background: #45484d -moz-linear-gradient(#292929 0%, #111 100%);  
  background: #45484d linear-gradient(#292929 0%, #111 100%);
}