Proficio JS

Basic Implementation


document.addEventListener('DOMContentLoaded',function() {
	var options = {
		id: 'demo1',
		name: 'demo1',
		targetContainer: '#demo1-target',
		rangeContainer: '#demo1',
		val: 25,
		min: 0,
		max: 100,
		granularity: "5"
	}
	var myProficio1 = new Proficio(options);
},false);

Drag the control...

Vertical Implementation

Advanced demo with custom callback for range changes:


document.addEventListener('DOMContentLoaded',function() {
	var options = {
		id: 'demo2',
		name: 'demo2',
		targetContainer: '#demo2-target',
		rangeContainer: '#demo2',
		val: 10,
		min: 0,
		max: 100,
		granularity: "10",
		orientation: 'v',
		callback: function() {
			var myRangeInstance = this
				, myTargetElem = document.querySelector('#demo2-target')
				, myRangeVal = myRangeInstance.val
				, myNewOpacity = myRangeVal/100;
			;
			console.log('My custom callback with my Proficio JS instance: ', myRangeInstance)
			console.log('Setting the opacity of the target based on the progress made in the range: ' + myNewOpacity);

			myTargetElem.style.cssText = 'opacity: ' + myNewOpacity;
		}
	}
	var myProficio2 = new Proficio(options);
},false);

Drag the control...


document.addEventListener('DOMContentLoaded',function() {
	var options = {
		id: 'demo3',
		name: 'demo3',
		targetContainer: '#demo3-target',
		rangeContainer: '#demo3',
		val: 25,
		min: 0,
		max: 100,
		granularity: "5",
		orientation: 'h'
	}
	var myProficio3 = new Proficio(options);
	// use new instance to call API methods
	myProficio3.step('down');
	myProficio3.step('up');
	myProficio3.set(10);
},false);

Advanced Implementation With step() and set() Controls

Advanced demo with external step() and set() controls.

Advanced Implementation With play(), pause() and stop() Controls

Advanced demo with external `play()` functionality and custom play speed.


document.addEventListener('DOMContentLoaded',function() {
	var options = {
		id: 'demo4',
		name: 'demo4',
		targetContainer: '#demo4-target',
		rangeContainer: '#demo4',
		val: 1,
		min: 1,
		max: 10,
		granularity: "1",
		playSpeed: 500
	}
	var myProficio4 = new Proficio(options);
	// use new instance to call API methods
	myProficio4.play();  // automatically plays the range
	myProficio4.pause(); // pauses the playing range
	myProficio4.stop();  // stops and reset the range
},false);

Documentation

For full documentation, please see the `docs` folder or the readme of the Github repository.