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. See usage. Used by Pangaea360.
Get it raw28k
…minified13k

example 1: Percentage value, color shifting and −/+ buttons

70%

example 2: Smart snapping, with optional markers

example 3: Result only, drag disabled, dynamic. %

example 4: Vertical (only modern browsers)

Usage

Each of the examples below correspond to the ones above. 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
 
$('#myslider_1').sGlide({
	height: 10,
	image: 'knob.png',
	startAt: 70,
	colorStart: '#3a4d31',
	colorEnd: '#7bb560',
	buttons: true,
	drag: function(o){
		var pct = Math.round(o.value)+'%';
		$('#percentage').html(pct);
	},
	onButton: function(o){
		var pct = Math.round(o.value)+'%';
		$('#percentage').html(pct);
	}
});
$('#myslider_2').sGlide({
	startAt: 38,
	pill: false,
	width: 60,
	snap: {
		points: 4,
		markers: true
	}
});
$('#myslider_3').sGlide({
	startAt: 50,
	height: 20,
	disabled: true
});

// dynamically update
$('#myslider_3').sGlide(
	'startAt',
	input_value,	// Number, percent
	true			// animate
);
$('#myslider_4').sGlide({
	startAt: 33.33,
	flat: true,
	width: 300,
	unit: 'px',
	snap: {
		points: 5,
		markers: true,
		onlyOnDrop: true
	},
	vertical: true,
	showKnob: false
});

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"
Breakdown
PropertyDefaultDescription
startAt0Number. Percent value to set the slider handle position on its creation. Inject your data here to visually represent it.
image'none'String. Path of handle (a.k.a. "knob") image to use; e.g. 'images/slider-knob.png'
width100Number. The width of the main shell of the slider. If unit is set to '%', width will be relative to its parent.
height40Number. Pixel value of the height of the main shell of the slider. Ignores unit.
unit'%'String. Also accepts 'px' to govern widths.
pilltrueBoolean. Set to false to turn off rounded corners.
disabledfalseBoolean. For data display only. Set to true to disable user interactivity.
colorStart''String. Standard CSS color value; e.g. '#669933' or 'red'. Used for color shifting, so as the knob slides, the follow bar's color transitions between the color set here and that of colorEnd.
colorEnd''String. Standard CSS color value; e.g. '#669933' or 'red'. Used for color shifting, so as the knob slides, the follow bar's color transitions between the color set here and that of colorStart.
verticalfalseBoolean. Rotates the slider 90 degrees counterclockwise using CSS3. The −/+ buttons are exempt, so you'll have to position them manually. When true, refrain from positioning the slider and its parent elements absolutely or relatively as this will offset the cursor registration.
showKnobtrueBoolean. Hides the knob when false.
buttonsfalseBoolean. Draws −/+ buttons that flank the slider. You can use the onload callback to change the HTML content of the buttons once they've been drawn. Style them as necessary. Clicking one of the buttons will advance the slider 10%. Click & hold to advance continuously. When hard or onlyOnDrop snapping is enabled, the slider will advance to the snap points. (The [enabled] keyboard controls work on the same principle, although independently.)
snap{…}Object. Contains the following snap settings.
snap.points0Number. Set the number of snap points between 1 and 9. Effectively enables snapping.
snap.markersfalseBoolean. When true, draws tiny snap markers to indicate the snap points. CSS to change the color: #sliderid_markers div { border-left: #999 solid 1px !important; }.
snap.hardfalseBoolean. Meaning the slider handle cannot be positioned between snap points.
snap.onlyOnDropfalseBoolean. Same as hard, but only after the handle has been dropped. Overrides hard.
drop Callback. Fire an event on handle drop. Returns an object containing slider data.
drag Callback. Fire an event on handle drag. Returns an object containing slider data.
onSnap Callback. Fire an event on handle snap. Returns an object containing slider data.
onButton Callback. Fire an event clicking or holding one of the −/+ buttons. Returns an object containing slider data.
onload Callback. Fire an event when the slider has finished loading. Returns nothing.

Version History
1.10.0added keyboard functionality03.01.2014
1.9.1bug fix: when button is pressed but released off button, button action now gets cleared19.12.2013
1.9.0added −/+ buttons option, along with the onButton and onload callbacks; minor bug fixes18.12.2013
1.8.8stability (some distortion resistance); better rebuild on mobile; mobile orientation change support09.12.2013
1.8.7snap marks now align to snap points; bug fix: vertical now rebuilds properly03.12.2013
1.8.5added mobile support & the onSnap callback02.12.2013
1.7.1added real snapping and reworked its options; added "destroy" method — now allows clean rebuild;
bug fix: when shell is thinner than knob, knob now retains its position in vertical mode
28.11.2013
1.5.0added loadbar capability and "animated" option27.11.2013
1.0.0added Vertical mode; added option to hide knob26.11.2013
0.3.1more accurate snap markers; added color shifting25.07.2013
0.2.6bug fix: constraints when dragging20.12.2012
0.2.5bug fix: when knob is image, startAt now gets the correct knob width13.12.2012
0.2.0added disabled state08.12.2012
0.1.0born24.11.2012