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
Enjoy. Also check out sGlide.RANGE

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		: displayResult,
	onButton	: displayResult
});

function displayResult(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,
		type	: 'soft'
	},
	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,
		type	: 'soft'
	},
	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;
		},
	}));
}
PropertyDefaultDescription
startAt0Number. Percentage value to set the slider handle position on its creation. Currently only accepts percentage values, but returns both percentage and custom unit values at runtime.
image'none'String. Path of handle/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. Set to true to disable user interactivity and hide knob.
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. Replaces colorStart and colorEnd.
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.
totalRange[0, 0]Array of two numbers. Custom units indicating start and end slider values.
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 soft snapping is used, 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.typefalseString. As of version 2.1. Set to 'hard' so that the slider handle cannot be positioned between snap points. Set to 'soft', like 'hard', but handle is positioned only after it has been dropped.
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 rendering. Returns an object containing slider data.

2.1.0removed snap properties hard & onlyOnDrop in favour of snap.type; also snap.markers became snap.marks; added totalRange property & runtime values thereof returned; destroy method now chainable for jQuery; fixed minor scoping issue; modified colorShift handling; significant changes with regards to data entered and data received; replaced setInterval with event listener (+ IE polyfill); removed drag and drop callbacks from initiator function; added slider data to onload callback; jQuery: removed unnecessary removeEventListeners for IE that caused an error on destroy16.11.2014
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 inconsistencies30.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