dragpad

Small, no dependencies HTML/JS component that can be used as a flipswitch, slider, bidimensional slider, progress bar, etc

See it

https://faelv.github.io/dragpad/

How To Use

1. Include the following files:
   css/dragpad.structure.css
   css/dragpad.theme.css (you can customize or replace the theme file)
   js/dragpad.js
   

2. Call the function dragpad passing the parent element as the first parameter (ID as string or the element itself) and an options object as second parameter.

dragpad('parent', {...});
//if you want a reference
var dp = new dragpad(parentElm, {...});

3. That's it. There's a sample.html file include.

Options

Name	Type	Description	Default
padWidth	String	Width of the pad. Any CSS value.	'200px'
padHeight	String	Height of the pad. Any CSS value.	'180px'
padCapture	Boolean	If clicking on the pad captures the handle.	false
padHTML	String	HTML to be inserted inside the pad.	undefined
padClass	String	Pad's CSS class.	undefined
handleWidth	String	Width of the handle. Any CSS value.	'40px'
handleHeight	String	Height of the handle. Any CSS value.	'40px'
handleHTML	String	HTML to be inserted inside the handle.	undefined
handleClass	String	Handle's CSS class	undefined
wrapperClass	String	CSS class for the wrapper element (pad's parent)	undefined
interactive	Boolean	If the component respondes to user actions.	true
vertMargins	String	Pad's top and bottom margins. Left it as undefined to calculate it automatically.	undefined
horzMargins	String	Pad's left and right margins. Left it as undefined to calculate it automatically.	undefined
autoDOMInsert	Boolean	Inserts elements into DOM as soon as the component is created, otherwise you'll have to call DOMInsert	true
startX	Number | String	Starting position of the handle's X axis. If it's a string startY must be a string too.	0
startY	Number | String	Starting position of the handle's y axis. If it's a string startX must be a string too.	0
onBeforeMove	Function	Called before the handle moves. Receives an event object. Return false to cancel the action.	undefined
onAfterMove	Function	Called after the handle moves. Receives an event object.	undefined
onStartMove	Function	Called when the handle starts moving. Receives a reference to the component.	undefined
onEndMove	Function	Called when the handle stops moving. Receives a reference to the component.	undefined
onCreated	Function	Called after the elements have been inserted into DOM. Receives a reference to the component.	undefined
onResized	Function	Called when the component is resized, generally due a window resize. Receives an event object.	undefined

Event Object

Property	Type	Description
x	Number	New (or user defined) X position.
y	Number	New (or user defined) Y position.
currentX	Number	Handle's X current position.
currentY	Number	Handle's Y current position
maxX	Number	Pad's width.
maxY	Number	Pad's height.

Properties

Name	Type	Description
handleX	Number	Gets or sets handle's current X position
handleY	Number	Gets or sets handle's current Y position
handleXPerc	Number	Gets or sets handle's current X position in percentage (0 <> 100)
handleYPerc	Number	Gets or sets handle's current Y position in percentage (0 <> 100)
padWidth	Number	Gets or sets the pad width
pasHeight	Number	Gets or sets the pad height
interactive	Boolean	Enables or disables user interaction

Methods

Name	Description
moveHandleTo	Moves the handle Params: x: number, y: number
moveHandleToPerc	Moves the handle using percentage Params: x: number, y: number
refreshState	Forces a refresh
DOMInsert	Call it to insert elements into DOM if autoDOMInsert was false