New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/sglide-generate-a-simple-light-weight-feature-rich-slider/
sGlide - Generate a simple, light-weight, feature-rich slider
Download Demo
sGlide is a super flexible and light-weight jQuery plugin that generates a simple, feature-rich & mobile ready slider, which can be easily customized and styled using regular CSS.
1. INCLUDE JS FILES
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="sGlide-1.10.0.min.js"></script>
2. HTML
<div id="slider1" class="slider_bar"></div> <div class="pct">70%</div>
3. JAVASCRIPT
$(document).ready(function() $('#slider1').sGlide( 'width': 85, 'height': 12, 'image': 'img/knob.png', 'startAt': 83, 'colorStart': '#360', 'colorEnd': '#693', 'buttons': true, drag: function(o) // console.log(o.guid+': '+o.sliderValue+'%'); $('.pct').html(Math.round(o.value)+'<sup>%<sup>'); , onButton: function(o) // console.log(o.guid+': '+o.sliderValue+'%'); $('.pct').html(Math.round(o.value)+'<sup>%<sup>'); ); );
Just apply sGlide() to an empty <div> with a unique identifier. You can leverage this identifier (or class) to style the shell and its components with CSS. Hint: use .slider_knob and .follow_bar
You can also create a loadbar by passing a percentage value (use decimal points for added precision) to the startAt prop of an existing slider: $(‘#my_slider’).sGlide(‘startAt’, 68.2); or make animated AJAX gauges: $(‘#my_slider’).sGlide(‘startAt’, 85.9, true) by setting the animated param to true. To rebuild a slider, destroy it first: $(‘#my_slider’).sGlide(‘destroy’).
