/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px white, 0px 0px 3px white;
  height: 25px;
  border-radius:36px;
  width: 25px;
  background: transparent;
  cursor: pointer;
  margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  border: 2px solid rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px white, 0px 0px 3px white;
  height: 25px;
  border-radius:36px;
  width: 25px;
  background: transparent;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  border: 2px solid rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px white, 0px 0px 3px white;
  height: 25px;
  border-radius:36px;
  width: 25px;
  background: transparent;
  cursor: pointer;
}