/*   
<div class="sld" style="width:250px;top:20px;">
	<input class="slider" type="range" min="-4" max="14" value="0" oninput="slider(this)">
	<span id="fontsize" style="color: gray" data-suffix="font-size">1em</span><span style="color: gray">&nbsp;&nbsp;Font Size</span> 
</div>
function slider(e) {
	var value = e.value;
	var sliderText = e.nextElementSibling
	var size = value + 'px';
	sliderText.innerHTML = size;
	var cssName = sliderText.dataset.suffix;
	$('p').css(cssName, size);
}
*/
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    padding: 0px;
    width: 100%;
    height: 20px;
    border-radius: 15px;
    background: #1A1A1A;
    position: relative;
    outline: none;
    box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),  inset -5px -15px 40px rgba(255,255,255,0.1),  inset 1px 1px 2px rgba(0,0,0,0.5),  inset 5px 15px 40px rgba(0,0,0,0.2),  -2px -40px 50px -20px rgba(255,255,255,0.1),  2px 35px 50px -10px rgba(0,0,0,0.4),  0px 0px 25px 8px rgba(60,60,60,1);
}
.slider::-ms-track {
	color: transparent;
	border-color: transparent;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
	-moz-appearance: none;
    appearance: none;
    width: 10px; 
    height: 15px; 
	cursor: pointer;
	background: #25292C;
	border-radius: 15px;
	box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),  inset 3px 15px 45px rgba(255,255,255,0.1),  inset -1px -1px 2px rgba(0,0,0,0.5),  inset -3px -15px 45px rgba(0,0,0,0.2),  1px 5px 30px -4px rgba(0,0,0,1);
}
.slider::-moz-range-thumb {
    width: 15px;
    height: 22px;
	border-width: 0px;
    background: #25292C;
    cursor: pointer; 
	box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),  inset 3px 15px 45px rgba(255,255,255,0.1),  inset -1px -1px 2px rgba(0,0,0,0.5),  inset -3px -15px 45px rgba(0,0,0,0.2),  1px 5px 30px -4px rgba(0,0,0,1);
}
.slider::-ms-thumb {
	-ms-appearance: none;
    width: 15px;
    height: 22px;
    background: #25292C;
    cursor: pointer; 
}
.sld {
	position: relative;
}
.videoScrub {
    width: 320px;
    height: 240px; 
    cursor: ew-resize; 
	background: #3A85BD;
}
.videoScrub::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
	-moz-appearance: none;
    appearance: none;
}
.videoScrub::-moz-range-thumb {
    cursor: pointer; 
}