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)

Type	Description
ready	Fire an event on instance readiness. Receives nothing.
drop	Fire an event on handle drop. Receives an argument containing slider data.
drag	Fire an event on handle drag. Receives an argument containing slider data.
snap	Fire an event on handle snap. Receives an argument containing slider data.
button-press	Fire an event clicking or holding one of the −/+ buttons. Returns an object containing slider data. Requires buttons.

Helpers

Name	Description
Slydr.entries	An array of instances.
Slydr.info	Quick-access meta information.
prototype.destroy()	Destroy the instance.
instance.reset()	Destroys then rebuilds the slider instance.