Playing with the slider

dabblet.css

body {
background-color: #333;
}

#rslider {
position:absolute;
left:50%;
width:100px;
height:18px;
border-radius:0 6px 6px 0;
		
}

#lslider {
position:absolute;
right:50%;
width:10px;
height:18px;
border-radius:6px 0 0 6px;



}

#track {
width:100%;
height:100%;
z-index:100;
position:absolute;
}

.slider {
	/*	background-color: #ddd;*/
	background-image: linear-gradient(bottom, rgb(150,150,150) 0%, rgb(80,80,80) 80%, rgb(50,50,50) 100%);

} 

#vtrack {
height:18px;
width:100%;
}

#bubble {
color:#fff;

background-color:#000;
margin-top:-15px;
margin-left:-100px;
text-align:center;
width:200px;
min-width:10px;
border-radius:10px;
box-shadow: 1px 1px 20px 0px rgba(255,255,255,0.5);
padding:3px;

position: absolute;
top: 200px;
left: 300px;


}

#bubble:after {
position:absolute;
display:block;
content:"";
height:0;
width:0;
left:0;
right:0;
bottom:-19px;
border-color:#000 transparent transparent;
border-style:solid;
border-width:10px;
margin:auto;
}

dabblet.html

<div id="bubble" class="bubble">
  <div id="vtrack" class="vtrack">
    <div id="lslider" class="slider"></div>
    <div id="rslider" class="slider"></div>
    <div id="track" class="track"></div>
  </div>
</div>

settings.json

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