Slider

dabblet.css

/**
 * Slider
 */
 
 * {
 margin: 0;
 padding: 0;
 }
 
html {
	min-height: 100%;
}

body {
	min-height: 100%;
	background: #3d414c linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.4));
	background-size: cover;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}


.demo {
	margin: 50px auto;
	text-align: center;
}

/* Much of this code lifted from Simurai's Umbrui (mainly because I can't remember it off my own back) */

input[type="range"] {
    -webkit-appearance: none;   /* Remove Safari default */
    outline: none;
    width: 250px;
    height: 10px;
    border-radius: 10px;
    position: relative;    
    background-color: rgba(0,0,0,.3);    
    -webkit-background-clip: padding-box;
    border: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.1), inset 0 1px 3px rgba(0,0,0,.4);
    cursor: ew-resize;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;   /* Remove Safari default */
    position: relative;
    z-index:        1;

    width: 26px;
    height: 26px;
    border-radius: 100%;
    
    background-image:   -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
                        
                        -webkit-repeating-radial-gradient(  50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
                        -webkit-repeating-radial-gradient(  50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.2) 7.5%),
                        -webkit-repeating-radial-gradient(  50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
                        
                        -webkit-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); 
   box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.7);
}

dabblet.html

<div class="demo">
	<input type="range">
</div>

settings.json

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