A super flexible and light-weight jQuery- or standalone plugin that generates a simple, feature-rich & mobile-ready slider, which can be easily customized and styled using regular CSS. Used by Leafcutter.
jquery.sGlide13k
standalone15k

example 1: Color shifting, −/+ buttons and arrow keys

70%

example 2: Smart snapping, with optional marks

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

example 4: Vertical (only modern browsers)



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,
	colorShift: ['#3a4d31', '#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,
	width: 300,
	unit: 'px',
	snap: {
		points: 5,
		markers: true,
		onlyOnDrop: true
	},
	vertical: true,
	showKnob: false
});

Optionally create a loadbar, or make animated* AJAX gauges, by passing a percentage value to the startAt prop of an existing slider: slider_div.sGlide('startAt', 68.2). For the jQuery plugin, to enable animation, set the optional third param to true.

To rebuild a slider, destroy it first: slider_div.sGlide('destroy') or sGlide_inst.destroy().

To enable keyboard arrow controls, give your main shell the following attribute: data-keys="true". To require the Shift key, use data-keys="shift"

*Note: animation is not supported in standalone plugin ■
(jQuery independent)
var el = document.getElementById('myslider_4');

var my_slider = new sGlide(el, {
	startAt: 33.33,
	width: 300,
	unit: 'px',
	snap: {
		points: 5,
		markers: true,
		onlyOnDrop: true
	},
	vertical: true,
	showKnob: false
});

// dynamically update
my_slider.startAt(80);
// multiple sliders

var sglideArr = [];
var elsArr = document.getElementsByClassName('slider_bar');

for (var i = 0; i < elsArr.length; i++){
	sglideArr.push(new sGlide(elsArr[i], {
		width: 300,
		unit: 'px',
		buttons: true,
		drop: function(o){
			var pct = Math.round(o.value)+'%';
			document.getElementById('percentage')
				.innerHTML = pct;
		},
	}).startAt(40*(i+1)));
}
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'
retinatrueBoolean. As of version 2. Automatically looks for an image with the suffix @2x based on the image property. To disable this feature, it must be explicitly set to false.
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''Deprecated as of version 2. 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''Deprecated as of version 2. 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.
colorShift[ ]Array. As of version 2. An array of two CSS color values. The first being the start value, the last being the end value.
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 in the same fashion.
snap{…}Object. Contains the following snap settings.
snap.points0Number. Set the number of snap points between 1 and 9. Effectively enables snapping.
snap.marksfalseBoolean. Draws tiny snap marks to indicate the snap points.
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.

2.0.0new standalone (jquery independent) plugin; major improvements in code structure, stability, accuracy; changed color shift property (see usage); only corresponding arrow keys for horizontal or vertical; added Windows Phone support; added retina image handling; fixed issues in destroy methods; added shift + arrow keys; and various bug fixes, namely functional inconsistencies28.10.2014
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