Customize input type="range"

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10751

Example of customizing HTML5 input type range.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/myStyle.css">
	</head>
	
	<body>
	
			<input type="range" id="test" min="10" max="100" step="1">

	</body>

</html>

CSS:

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    width: 34px;
    height: 34px;
	border: 1px solid rgba(200,200,200,1);
    border-radius: 18px;
}

Look on an example here.