input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  margin: 0;
  border:0px;
  padding:0px;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 23px;
 cursor: pointer;
 box-shadow: 0 4px 4px rgba(0,0,0,0.3) inset;
 background: linear-gradient(to right, #005fc2, #35A834 40%, #ffd400 65%, #FF6400);
 border-radius: 20px;
 border: 0.2px solid #ffffff;
}
input[type=range]::-webkit-slider-thumb {
 box-shadow: 1px 2px 2px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,0.2);
 border: 1px solid rgba(0,0,0,0.05);
 height: 27px;
 width: 27px;
 border-radius: 28px;
 background: white;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -3px;
}
.slide:before {
  content: attr(min);
  position: absolute;
  bottom: 65px;
  left: 12px;
  color: black;
  font-size: 12px;
  font-weight:bold;
	background-color:transparent;
	padding-top:2px;
	width:21px;
	height:20px;
	text-align: center;
	border-radius: 40px;
}
.slide:after {
  content: attr(max);
  position: absolute;
  bottom: 65px;
  right: 13px;
  color: black;
  font-size: 12px;
  font-weight:bold;
	background-color:transparent;
	padding-top:2px;
	width:21px;
	height:20px;
	text-align: center;
	border-radius: 40px;
}
.val {
  position: absolute;
  left: 0;
  margin-left:8px;
  bottom: 64px;
  width: 100px;
  text-align:center;
  font-size: 12px;
  font-weight:bold;
}