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 styles.
$.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
 
const callback = o => {
	// display results from 'o' Object
};

$('#mySlider_1').sGlideRange({
	height	: 10,
	image	: ['img/knob_from.png', 'img/knob_to.png'],
	startAt	: 70,
	drag	: callback,
	onSnap	: callback
});

 
$('#mySlider_2').on('sGlide.ready', (e, data) => {
	// run when slider is ready
}).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()
(no dependency)
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 elements = document.getElementsByClassName('slider_bar');

for (let el of elements){
	sglideArr.push(new sGlideRange(el, {
		width	: 300,
		unit	: 'px',
		drop	: 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. Note: when hard or soft snapping is set, the startAt handles will reposition to their closest snap points.
image'none'String or Array of two strings. Path of handle/knob image(s) to use; e.g. 'images/slider-knob.png'
retinafalseBoolean. On retina displays, it automatically looks for an image with the suffix @2x based on the image property value. So with an image input of "drag_me.jpg", it'll assume "drag_me@2x.jpg" exists.
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 (relative / absolute sizing respectively). Note: unit defaults to 'px' when vertical setting is true for logistical reasons.
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.
noHandlefalseBoolean. Collapses the knob. As of v2. Replaces showKnob.
handleSize2%String. Only accepted values are "big" and "small". The former will draw the handle at 4% of the slider's total width, the latter will draw it at 1%, otherwise defaults. As of v2. Overridden by noHandle or the use of an image. For pixel-perfect control, apply an image of desired size.
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 2 and 11. 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. Accepts decimal values between 1 & 3 inclusive. The higher the number, the bigger the jump to a snap point. Doesn't apply to hard or soft snap, ie., snap.type unset.
drop Callback. Fire an event on handle drop. Receives an object containing slider data.
drag Callback. Fire an event on handle drag. Receives an object containing slider data.
onSnap Callback. Fire an event on handle snap. Receives an object containing slider data.

2.0.0chainable ($) • added jQuery 3 support ($) • added bar-drag • added resize support • removed orientation-change event • removed showKnob to favour newly added noHandle • removed onload callback prop to favour ready event ($) or load method (standalone) • added 2 more snap points (up to 11) • rebuilt snap marks • more accurate snapping • added snap sensitivity • other major snap improvements (including equalizing snap point flank distance) & bug fixes • significant behavior change: when hard or soft snapping is set, the startAt handles will reposition to their closest snap points! • removed CustomEvent polyfill • all callbacks now receive sGlideRange context (this) • removed internal custom element getter to favour querySelectorAll • better 'css' & 'extend' functions • better internal data storage / handling • cleaner: relying on offset values instead of style (type String) relying on highly precise stored decimal calculations instead of offset values • slight performance improvement with constraint checker mitigation, and better constraints in general • better destroy method • improved vertical positioning and alignments • added css class to snap markers container • much more efficient retina image processing • added handleSize prop • restored snapping other knob on knob-drag when locked • refactoring and general bug fixes20.02.2019
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