html5 range slider

HTML

<fieldset>
    <input type='range' value='20' min='20' max='50' step='5' />
</fieldset>

CSS

fieldset { background: #fc0; border: 0 }
*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  }

input[type=range],
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  margin:0; padding:0; border:0;
  }
input[type=range] {
  display:inline-block!important;
  vertical-align:middle;
  height:12px;
  padding:0 2px;
  border:2px solid transparent;
  background:rgba(0,0,0,0.25);
  min-width:100px;
  overflow:hidden;
  cursor:pointer;
  }
  input[type=range]::-ms-fill-upper { background:transparent; }
  input[type=range]::-ms-fill-lower { background:rgba(255,255,255,0.25); }


/* Browser thingies */
input[type=range]::-moz-range-track { opacity:0; }
input[type=range]::-ms-track        { opacity:0; }
input[type=range]::-ms-tooltip      { display:none; }

/* For whatever reason, these need to be defined
 * on their own so dont group them */
input[type=range]::-webkit-slider-thumb {
  background:rgba(255,255,255,0.75);
  height:12px; width:20px;
  border-radius:3px;
  cursor:ew-resize;
  box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px;
  }
input[type=range]::-ms-thumb {
  margin:0;padding:0;border:0;
  background:rgba(255,255,255,0.75);
  height:12px; width:20px;
  border-radius:3px;
  cursor:ew-resize;
  box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px;
  }
input[type=range]::-moz-range-thumb {
  margin:0;padding:0;border:0;
  background:rgba(255,255,255,0.75);
  height:12px; width:20px;
  border-radius:3px;
  cursor:ew-resize;
  box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px;
  }