Making an ugly range slider (webkit only)

dabblet.css

/**
 * Making an ugly range slider (webkit only)
 */
input[type="range"] {	
	width: 100%;
	height: 1em;
	border-radius: 0.25em;
	
	background-color: rgba(0, 0, 0, 0.05);
	
	box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-webkit-slider-thumb {
	width: 2.5em;
	height: 2.5em;
	
	border-radius: 100%;
	background: lightgrey;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

	cursor: pointer;	
}

input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.3), 
				inset 0 0 0 1px rgba(255, 255, 255, 0.8), 
				inset 0.75em 0.75em 8px rgba(0, 0, 0, 0.05);
}

input[type="range"],
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

dabblet.html

<input type="range">

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}