A smart, lightweight and flexible slider, that's fully featured and mobile-ready. It can be easily customized and styled using regular CSS.
jquery.sGlide12k
standalone13k
Enjoy. Also check out sGlide.RANGE

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

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
 
const callback = o => {
	var pct = Math.round(o.percent)+'%';
	$('#percentage').html(pct);
};

$('#myslider_1').sGlide({
	height		: 10,
	image		: 'images/knob.png',
	startAt		: 70,
	colorShift	: ['#3a4d31', '#7bb560'],
	buttons		: true,
	drag		: callback,
	onButton	: callback
});
$('#myslider_2').on('sGlide.ready', function(e, data){
	$(this).sGlide('startAt', 66.66);
	$('#container').css('visibility', 'visible');
}).sGlide({
	startAt	: 38,
	pill	: false,
	width	: 60,
	snap	: {
		points	: 4,
		markers	: true
	}
});
$('#myslider_3').sGlide({
	startAt	: 50,
	height	: 20,
	disabled: true,
	noHandle: 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,
	noHandle: true
});

Create animated* loadbars, by passing a percentage value to the startAt prop of an existing slider: slider_div.sGlide('startAt', 68.2). To enable animation ($), set the third parameter.

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"
•  To require the Ctrl key, use data-keys="ctrl"
(no dependency)
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,
	noHandle: true
}).load(function(data){
	this.startAt(data.percent * 2);	// 66.66
});
// multiple sliders

var sGlideInstances = [];
var nodes = document.getElementsByClassName('slider_bar');

for (el of nodes){
	sGlideInstances.push(new sGlide(el, {
		width	: 300,
		unit	: 'px',
		buttons	: true,
		drop	: o => {
			var pct = Math.round(o.percent)+'%';
			document.getElementById('percentage')
				.innerHTML = pct;
		},
	}));
}
PropertyDefaultDescription
startAt0Number. Percentage value to set the slider handle position on its creation. Currently only accepts percentage values, but callbacks return both percentage and custom unit values at runtime.
image''String. Path of handle/knob image to use; e.g. 'images/slider-knob.png'
retinafalseBoolean. As of version 2. If true, looks for an image with the suffix @2x based on the image property. Make sure the @2x image exists.
width100Number. The width of the main shell of the slider. If unit is set to '%' or unset, 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. Disables user interactivity. As of v3, no longer hides knob. Use noHandle.
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 the slider and the buttons separately. 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. Slider position returned in output.custom
showKnobtrueBoolean. Hides the knob when false. This has been removed as of v3.
noHandlefalseBoolean. Collapses the knob. As of v3.
buttonsfalseBoolean. Draws −/+ buttons that flank the slider. You can change the HTML content of the buttons — on ready/load — 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 11. 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.
snap.sensitivity2Number. As of version 2.2. Accepts decimal values between 1 & 3 inclusive. The higher the number, the bigger the jump to a snap point. Doesn't apply to hard snap.
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. Requires buttons.
onload Callback. Fire an event when the slider has finished rendering. Returns an object containing slider data. This has been removed as of v3 to favour the load method in standalone and the sGlide.ready event in jQuery.

3.1.0retina setting default set to false15.02.2018
3.0.0chainable ($) • added jQuery 3 support ($) • added resize support • removed orientation-change event • removed showKnob to favour newly added noHandle • removed onload callback to favour ready event ($) or load method (standalone) • restored 'custom' property to output on ready • added Ctrl key option • added 2 more snap points (up to 11) • rebuilt snap marks • more accurate snapping • other minor snap improvements & bug fixes • removed CustomEvent polyfill • all callbacks now receive sGlide context (this) • removed internal custom element getter to favour querySelectorAll • better 'css' & 'extend' functions • improved vertical positioning and alignments; unit default set to null • refactoring and general bug fixes10.01.2018
2.2.0added snap sensitivity (see Breakdown: snap.sensitivity) • other generic improvements17.04.2017
2.1.2bug fix: text inputs were not selectable by mouse-drag in Chrome for jQuery — a proper if statement in the document's mousemove event listener solved it, thereby possibly increasing performance (applied to both jQuery and standalone)01.02.2015
2.1.1bug fix: just clicking anywhere on bar didn't update value • nor did it update color in follow bar, for which a couple of constraint issues were also fixed24.01.2015
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