input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #3071a9;
}
input[type=range]::-webkit-slider-thumb {  
  height: 100%;
  width: 10%;
  border-radius: 20%;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 30%;
  cursor: pointer;
  background: #3071a9;
}