slydr v4.0.0

Slydr

new Slydr(container, settings)

A smart, lightweight and flexible slider, that's fully featured, responsive and mobile-ready. (Formerly sGlide)

Install

Modular static

import { Slydr } from './source/slydr.min.js';

Modular dynamic

import('./source/slydr.min.js').then(module => new module.Slydr());

Settings

All settings with their default values. Visit home page for detailed breakdown.

{
	"start-at": 0,
	"image": "",
	"height": 40,
	"width": 100,
	"unit": "%",
	"color-shift": false,
	"disabled": false,
	"vertical": false,
	"no-handle": false,
	"buttons": false,
	"retina": false,
	"custom-range": [0, 0],
	"key-control": false,
	"flag": false,
	"snap": {
		"marks": false,
		"type": false,
		"points": 0,
		"sensitivity": 2
	}
}

Styles

Styles have been separated from the logic, so a stylesheet is a virtual requirement for proper display. Edit at your whim.

slydr.scss

Callbacks

Fire callbacks at specific internal events using chainable on proto method. mySlydr.on("drag", func)

Helpers