sGlide - Generate a simple, light-weight, feature-rich slider

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: iframework.net

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').

To enable keyboard arrow controls, give your main shell the following attribute: data-keys="true"

4. OPTIONS