CSS Range Input With CSS

Edit Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Range Input With CSS</title>
<style>
	input[type='range']  {
		-webkit-appearance: none ;
		width:200px;
	}
	input[type='range']::-webkit-slider-runnable-track {
		-webkit-appearance: none ;
		appearance: none ;
		border-radius: 5px;
		box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
		background-color: #CCC;
		height: 8px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
	}
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		border-radius: 100%;
		background-color: #037cd5;
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		height: 22px;
		width: 22px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
		margin-top: -6px;
	}
	input[type='range']::-webkit-slider-thumb:hover { 
		background: #fdd921;
	}
	input[type='range']:active::-webkit-slider-thumb { 
		background: #fdd921; 
	}
	input[type='range']::-moz-range-track{
		-moz-appearance: none ;
		border-radius: 5px;
		box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
		background-color: #CCC;
		height: 8px;
		vertical-align:middle;
		margin:0; padding:0;
		border: none;
		cursor: pointer; 
	}
	input[type='range']::-moz-range-thumb {
		-moz-appearance: none ;
		border-radius: 100%;
		background-color: #037cd5;
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		height: 22px;
		width: 22px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
		margin-top: -6px;
	}
	input[type='range']::-moz-range-thumb:hover { 
		background: #fdd921; 
	}
	input[type='range']:active::-moz-range-thumb { 
		background: #fdd921; 
	}
	input[type=range]::-ms-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		animate: 0.2s;
		background: transparent;
		border-color: transparent;
		border-width: 39px 0;
		color: transparent;
	}
	input[type=range]::-ms-fill-lower {
		background: #CCC;
		border: 0px solid #000101;
		border-radius: 50px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-fill-upper {
		background: #CCC;
		border: 0px solid #000101;
		border-radius: 50px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-thumb {
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		border: 0px solid #000000;
		height: 22px;
		width: 22px;
		border-radius: 100%;
		background: #037cd5;
		cursor: pointer;
		margin-top: -2px;	
	}
</style>
</head>

<body>
<h1>HTML5 Range Input With CSS</h1>

<input type="range" min="0" max="50" value="20" step="1" onchange="rangevalue.value=value" />
<output id="rangevalue"></output>

</body>
</html>
Preview html View