Making an ugly range slider (webkit only)

dabblet.css

/**
 * Making an ugly range slider (webkit only)
 */
input[type="range"] {
background: darkgrey;
height: 30px;
display: block;
border-radius: 1em;
width: 100%;
box-sizing: border-box;

}
input[type="range"]::-webkit-slider-thumb {
background: lightgrey;
width: 40px;
height: 40px;
border-radius: 50%;
}
input[type="range"],
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}

dabblet.html

<input type="range">

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}