A derivative of sGlide. Select the range between custom min and max numbers. Returns selected range numbers and percentage values. Uses optional smart snapping. Apply your own CSS.
$.sGlideRange13k
standalone15k
||  autopilot: set cruising velocities min. and max. (km/s)
range.diff: %
range.diff: unit
52
63
74
81
The above example showcases sGlide.range (middle) and the surrounding data based on it. The mini sliders are "disabled" sGlides ■


Apply sGlideRange() 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').sGlideRange({
	height	: 10,
	image	: ['img/knob_from.png', 'img/knob_to.png'],
	startAt	: 70,
	drag	: displayResult,
	onSnap	: displayResult
});

function displayResult(o){
	// display results from 'o' Object
}
$('#mySlider_2').sGlideRange({
	startAt		: [50, 75],		// percent only
	totalRange	: [58,102],		// custom values
	pill		: false,
	width		: 60,
	snap		: {
		points	: 4,
		marks	: true
	}
});

$('#myslider_3').sGlideRange({
	startAt	: 50,
	height	: 20,
	locked	: true
});

// dynamically update
$('#mySlider_3').sGlideRange(
	'startAt',
	[valFrom, valTo],	// Array of 2 numbers, percent
	true				// animate
);
$('#mySlider_4').sGlideRange({
	startAt	: 33.33,
	width	: 300,
	unit	: 'px',
	snap	: {
		points	: 5,
		marks	: true,
		type	: 'hard'
	},
	vertical: true
});


To rebuild a slider, destroy it first: slider_div.sGlide('destroy') or sGlide_inst.destroy()
(jQuery independent)
var el = document.getElementById('mySlider_5');

var my_slider = new sGlideRange(el, {
	startAt	: [33.33, 66.66],
	width	: 300,
	unit	: 'px',
	snap	: {
		points	: 3,
		marks	: true,
		type	: 'soft'
	},
	locked: true
});

// dynamically update
my_slider.startAt(80);	// or ...startAt(25, 72)
// multiple sliders

var sglideArr = [];	// Array of sGlideRange instances
var elsArr = document.getElementsByClassName('slider_bar');

for (var i = 0; i < elsArr.length; i++){
	sglideArr.push(new sGlideRange(elsArr[i], {
		width	: 300,
		unit	: 'px',
		drop	: function(o){
			// display results from 'o' Object
		},
	}));
}


PropertyDefaultDescription
startAt0Number or Array of two numbers. Percentage value(s) 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'none'String or Array of two strings. Path of handle/knob image(s) to use; e.g. 'images/slider-knob.png'
retinatrueBoolean. On retina displays, it 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, esp. if the 2x images don't exist.
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. Disables user interactivity and hide knobs.
verticalfalseBoolean. Rotates the slider 90 degrees counterclockwise using CSS3. 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.
lockedfalseBoolean. Locks the range so that when dragging one slider handle, the other moves paralell with it.
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. 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 1.3. 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.
onload Callback. Fire an event when the slider has finished rendering. Returns an object containing slider data.

1.3.0added snap sensitivity (see Breakdown: snap.sensitivity); added bar-drag (!!); bug fix: set to correct values at onSnap asynchronously; cleaner: relying on offset values instead of style (type String); slight performance improvement with constraint checker mitigation; improved hard snap, esp. when startAt values are not at markers; better destroy method06.04.2017
1.0.1bug 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
1.0.0born of sGlide16.11.2014