github node package manager download
A smart, lightweight and flexible slider, that's fully featured and mobile-ready. Style it with your own CSS. [ formerly sGlide; dropped jQuery ]

Usage

new Slydr(container, settings);
var container = document.getElementById("slider_here");

var mySlider = new Slydr(container, {
	"start-at": 33.33,
	snap: {
		points: 5,
		markers: true,
		type: "soft"
	},
	vertical: true,
	"no-handle": true
}).ready(function(data) {
	this.position = data.percent * 2;	// 66.66
});
// multiple sliders

var nodes = document.getElementsByClassName("slider");

for (let el of nodes) {
	new Slydr(el, {
		buttons: true,
		"key-control": "ctrl"
	}).on("button-press", data => {
		// log data
	});
}


Note: due to the nature of this component, there are too many variables to account for the correct positioning of everything in every case scenario. So please use something like a negative value on the left margin for a given element's pixel adjustment. One such example is settings(vertical + flag).

Breakdown

Property Default Type Description
start-at 50 Number Value to set the slider handle position on its creation. Defaults to percentage values while, as of v4, also accepts custom unit values based on custom-range setting. Callbacks return both percentage and custom unit values (if set) at runtime.
image "" String Path of handle/knob image to use; e.g. 'images/slider-knob.png'
retina false Boolean If true, looks for an image with the suffix @2x based on the image property. Ensure the @2x image exists.
disabled false Boolean Disables user interactivity. To hide knob, use no-handle.
color-shift false Boolean This type as of v4. The shifting of the track colour on slide. Customize in Sass.
vertical false Boolean Rotates the slider 90 degrees counterclockwise using CSS3. The −/+ buttons are exempt when no snap marks are set, 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.
custom-range [0, 0] Array … of two numbers. Custom units indicating start and end slider values. Slider position returned in output.custom
no-handle false Boolean Collapses the knob.
buttons false Boolean 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.
key-control false Boolean Set true to use arrow keys; set "ctrl" to use ctrl + arrow key, and "shift" to use shift + arrow key.
flag false Boolean Generates a flag of percent value geosynchronized to the handle of the slider.
snap.points 0 Number Set the number of snap points between 1 and 11. Effectively enables snapping.
snap.marks false Boolean Draws tiny snap marks to indicate the snap points.
snap.type false String 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.sensitivity 2 Number 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.

Callbacks

Fire callbacks at specific internal events using chainable on proto method. mySlydr.on("drag", func)
Type Description
readyFires on instance readiness. Receives nothing.
dropFires on handle drop. Receives an argument containing slider data.
dragFires on handle drag. Receives an argument containing slider data.
snapFires on handle snap. Receives an argument containing slider data.
button-pressFires when clicking or holding one of the −/+ buttons. Returns an object containing slider data. Requires buttons setting.

Helpers

Name Description
Slydr.entriesAn array of instances.
Slydr.infoQuick-access meta information.
prototype.destroy()Destroy the instance.
instance.reset()Destroys then rebuilds the slider instance.

Version History

4.0.0 Derived from the henceforth deprecated sGlide, which was completely overhauled and subsequently rebranded. This will not support legacy browsers, nor will it have a jQuery counterpart. This iteration is far simpler than its predecessor, while suffering no feature loss.
  • NEW: added flag feature & setting
  • decoupled styles and logic, resulting in customizable SASS file and streamlined JS
  • color-shift setting is now a boolean type, simplifying internal JS!
  • cursor registration to slider handle is now absolute via getBoundingClientRect() rather than a problematic relative offset measure
  • removed pill setting; handled in CSS as border-radius for "slydr" class
  • removed width, height, unit settings; handled in CSS for "slydr" class
  • replaced "makeready" custom event dispatcher with Promise
  • handle image dimensions are obtained via naturalWidth/Height rather than offset counterparts; streamlined
  • settings are now dash-format over camelCase (personally more attractive)
  • moved "position" function from prototype into constructor, making private
  • start-at settings prop can now accept custom unit values (see Breakdown)
  • consolidated all setup functions
09.05.2020
3.1.0 retina setting default set to false 15.02.2018
3.0.0
  • chainable ($)
  • 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 fixes
10.01.2018
2.2.0
  • added snap sensitivity (see Breakdown: snap.sensitivity)
  • other generic improvements
17.04.2017
2.1.2 bug 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.1 bug fix: just clicking anywhere on bar didn't update value • nor did it update color in track bar, for which a couple of constraint issues were also fixed 24.01.2015
2.1.0
  • removed 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 destroy
16.11.2014
2.0.0
  • new 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 inconsistencies
30.10.2014
1.10.0 added keyboard functionality 03.01.2014
1.9.1 bug fix: when button is pressed but released off button, button action now gets cleared 19.12.2013
1.9.0 added −/+ buttons option, along with the onButton and onload callbacks • minor bug fixes 18.12.2013
1.8.8 stability (some distortion resistance) • better rebuild on mobile • mobile orientation change support 09.12.2013
1.8.7 snap marks now align to snap points • bug fix: vertical now rebuilds properly 03.12.2013
1.8.5 added mobile support & the onSnap callback 02.12.2013
1.7.1 added 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.0 added loadbar capability and "animated" option 27.11.2013
1.0.0 added Vertical mode • added option to hide knob 26.11.2013
0.3.1 more accurate snap markers • added color shifting 25.07.2013
0.2.6 bug fix: constraints when dragging 20.12.2012
0.2.5 bug fix: when knob is image, startAt now gets the correct knob width 13.12.2012
0.2.0 added disabled state 08.12.2012
0.1.0 born 24.11.2012