Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including sbweb-dragband with all npm packages installed. Try it out:

var sbwebDragband = require("sbweb-dragband")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

sbweb-dragband v0.2.6

UI library to create a draggable list bar. Reponsive, scrollable, swipeable

DragBand

UI library to create a draggable list bar

  • Native javascript
  • Responsive
  • Supports swiping

Usage

// create a dragBar with itemindex 11 selected by default
var myDragBand = dragBand.init(
    document.querySelector('#myul'), 11, {
        leftScroller : document.getElementById('left-scroll-button'),
        rightscroller : document.getElementById('right-scroll-button'),
        scrollstep : 50,
        elasticWidth : 100,
        hideScrollerMargin : 20
    });

// select no item
myDragBand.selectItem(null);

// select item with index 2
myDragBand.selectItem(2);


// create object with default options and no scrollbuttons
var simpleDragBand = dragBand.init(document.querySelector('#simple'));

Options

Configure the third parameter of init method as an object with the following properties:

PropertyTypeDescriptiondefault
leftScrollerObjectelement representing left scrollbuttonnull
rightscrollerObjectelement representing right scrollbuttonnull
scrollstepnumberpx to scroll when using wheel/scrollbutton50
elasticWidthnumberelasticity beyond left/right edges in px100
hideScrollerMarginnumberhidden buttons when with margin from edge20

Example

Check https://codepen.io/anon/pen/vzaaoL for an example.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free