JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" />

CSS

input[type=range] {
	-webkit-appearance: none;
	border-radius: 0px;
	vertical-align: middle;
	margin: -8px 0 0 0;
	padding: 0;
	position: relative;
	vertical-align: middle;
	overflow-x: hidden;
	overflow-y: visible;
	width: 100%;
	background: transparent;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	position: relative;
	pointer-events:none;
	width: 8px;
	height: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
	background: #757575; 
	height: 8px;
	margin:5px 0;

}
input[type=range]::-webkit-slider-thumb:before {
	content:"-";
	font-style: 0;
	line-height:0;
	position: absolute;
	left:-3000px;
	right:0;
	top:0;
	bottom:0;
	background: #cc181e;
}
input[type=range]::-webkit-slider-thumb:after {
	content: "";
	position: absolute;
	left:-4px;
	right:-4px;
	top:-4px;
	bottom:-4px;
	background: #adadad;
	border-radius: 50%;
	border:5px solid #e8e8e8;
	z-index: 10;
}
input[type=range]:focus {
	outline:none;
}
input[type=range]:hover::-webkit-slider-thumb:after,
input[type=range]:focus::-webkit-slider-thumb:after {
	background: #cc181e;
}
input[type=range]:disabled::-webkit-slider-thumb:before {
	background-color: #a1151a;
}
input[type=range]:disabled::-webkit-slider-thumb:after {
	background: #adadad !important;
}