CSS/input[type='range']

input[type="range"] {
  -webkit-appearance:none;
  width: 100%; background: #eee;
  box-shadow: 0 0 10px #666;
  border-radius: 50px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: #999;
}
input[type="range"]::-webkit-slider-thumb:active {
  background: #fefefe;
}