lone ranger

dabblet.css

/* lone ranger */
[type=range], datalist { font-size:16px; width:35em }
* { outline: 1px solid #999 }
[type=range],
[type=range]::-webkit-slider-thumb, 
[type=range]::-webkit-media-slider-thumb {
	appearance:none }
	
[type=range]{ background:#333; 
	height:1px; display:block;
	margin:4em 0 }

[type=range]::-webkit-slider-thumb {
	 background:red; width:4em; height:2em;
	 border-radius:.38em }
	 

datalist { display:flex; background:#eee }
option { flex:auto }

dabblet.html

<label> This input styling is:
	<input type=range min=0 max=3 value=2 list=score>
	<datalist id=score>
	    <option value=0>lame</option>
	    <option value=5>not half bad</option>
	    <option value=10>visionary</option>
	</datalist>
</label>

dabblet.js

// alert('Hello world!');

settings.json

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