verticalslider

by FEKING

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://m.xblix.ca/sources/verticalslider.js"></script>
<div style="background-color:#000000;">
   
           <input type="range" min="0" max="255" value="125" step="1" sliderOrientation="verticalInverted"  />

    </div>

CSS

label.ui-slider-horizontal label.ui-slider-vertical { display: block; }
div.ui-slider-horizontal { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width:250px ; }


a.ui-slider-handle-horizontal { position: absolute; z-index: 10;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
 a.ui-slider-handle-vertical .ui-btn-inner { padding-left: 0; padding-right: 0; }
.min-width-480px label.ui-slider-horizontal { display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
.min-width-480px div.ui-slider-horizontal { width: 45%; }
div.ui-slider-vertical, div.ui-slider-verticalInverted { position: relative; display: inline-block; overflow: visible; height: 250px; padding: 0; margin: 0 2% 0 20px; top: 4px; width:15px ; }
label.ui-slider-vertical, label.ui-slider-verticalInverted { display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
div.ui-slider-vertical, div.ui-slider-verticalInverted { width: 15px; }


a.ui-slider-handle-vertical, a.ui-slider-handle-verticalInverted { position: absolute; z-index: 10;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -8px; }