cssVertSlider

by David McClelland

HTML

<div id="mapZoomOutline">
    <div class="mapZoomLabel" id="mapZoomIn">+</div>
    <div id="mapZoomTrack"><div id="mapZoomDragger"></div></div>   
    <div class="mapZoomLabel" id="mapZoomOut">-</div>  
</div>

CSS

#mapZoomOut{
    top:184px;
    font-size:24px;
}

#mapZoomIn{
    top:15px;
    font-size:20px;
}

.mapZoomLabel{
     position:absolute;
   font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    margin-left:13px;
}

#mapZoomDragger
{
    position:absolute;
	width: 15px;
	height: 15px;
    margin-left:-5px;
    margin-top:1px;
    top:48px;
	-webkit-border-radius: 8px 7px 7px 8px/8px 8px 7px 7px;
	-moz-border-radius: 8px 7px 7px 8px/8px 8px 7px 7px;
	border-radius: 8px 7px 7px 8px/8px 8px 7px 7px;
	background-color: #e3e3e3;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
	box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
	border: solid 1px #848484;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(255,255,255,.4));
}

#mapZoomTrack
{
    margin-left:16px;
    margin-top:36px;
	width: 5px;
	height: 140px;
	-webkit-border-radius: 3px 2px 2px 3px/3px;
	-moz-border-radius: 3px 2px 2px 3px/3px;
	border-radius: 3px 2px 2px 3px/3px;
	background-color: #6f6f6f;
	-webkit-box-shadow: 0 1px #fff, inset 0 1px 0 2px rgba(0,0,0,.29);
	-moz-box-shadow: 0 1px #fff, inset 0 1px 0 2px rgba(0,0,0,.29);
	box-shadow: 0 1px #fff, inset 0 1px 0 2px rgba(0,0,0,.29);
}

#mapZoomOutline
{
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.25);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.25);
	box-shadow: 0 2px 4px rgba(0,0,0,.25);
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image:...