sglide.range

sGlide.range is a JS (or jQ) plugin that generates a simple, highly flexible, feature-rich, mobile-ready range slider.


Keywords
drag, slider, loadbar, gauge, vertical, smart, snapping, dynamic, mobile, arrow, keys, html, range
Licenses
GPL-3.0/GPL-2.0+
Install
npm install sglide.range@2.0.0

Documentation

sGlide.range

A derivative of sGlide. Select the range between custom min and max numbers. Returns selected range numbers and corresponding percentage values. Uses optional smart snapping. Apply your own CSS.

For details, visit home page.

Quickstart Guide: apply the following to an empty div with a unique id.

let callback = o => {};
let options = {
	startAt: [20, 60],	// percentages of totalRange
	width: 90,
	height: 20,
	totalRange: [58, 102],
	snap: {
		points: 5,
		marks: true
	},
	drop: callback,
	onSnap: callback
});

// Standalone
let sGr_instance = new sGlideRange(el, options);

// or jQuery
$('#slider').sGlideRange(options);