Double Slider

app.js

var Slider = require('slider');

var win = Ti.UI.createWindow();

var slider = Slider({
		left: 10,
		right: 10,
		height: 40
});


slider.addEventListener('change', function(e) {
  // do something with the values
});

win.add(slider);

win.open();

slider.js

// Get the TiDraggable module from: http://cl.ly/2y1z2F132P0o
// Get the images from: http://cl.ly/3D3Q3f1s0l3d
var TiDraggable = require('ti.draggable');
var WIDTH = 23;
var HEIGHT = 22;
module.exports = function(_params) {
	_params.leftValue = 0;
	_params.rightValue = 0.8;

	var view = Ti.UI.createView(_params);

	var innerView = Ti.UI.createView({
		left: 0,
		right: 0,
		height: 22,
	 	backgroundImage: '/images/slider/slider-border.png',
	  	backgroundLeftCap: 11
	});
	view.add(innerView);

	var knobRight = TiDraggable.createView({
	    center: { x: 0, y: 0 },
	    width: WIDTH, height: HEIGHT,
	    backgroundImage: '/images/slider/slider-knob.png',
	    axis: 'x',
	    knob: 'right'
	});
	 
	var knobLeft = TiDraggable.createView({
	    center: { x: 0, y: 0 },
	    width: WIDTH, height: HEIGHT,
	    backgroundImage: '/images/slider/slider-knob.png',
	    axis: 'x',
	    knob: 'left'
	});

	var fillView = Ti.UI.createView({
	    height: 9,
	    backgroundLeftCap: 4,
	    backgroundTopCap: 5,
	    backgroundImage: '/images/slider/slider-bar.png',
	});
	 
	var distance = 0;

	function viewPostLayout(e) {
		view.removeEventListener('postlayout', viewPostLayout);
		var y = e.source.size.height / 2;

		distance = e.source.size.width;
		var _distance = e.source.size.width - WIDTH;
		var leftX = (WIDTH / 2) + (_params.leftValue * distance);
		var rightX = (WIDTH / 2) + (_params.rightValue * distance);

		knobLeft.minLeft = 0;
		knobRight.maxLeft = distance;

		knobLeft.center = {x: leftX, y: y};
		knobRight.center = {x: rightX, y: y};
		fillView.left = leftX;
		fillView.width = rightX - leftX;
		view.add(fillView)
		view.add(knobLeft);
		view.add(knobRight);

	}

	function onKnobMove(e) {
		var leftX = knobLeft.center.x,
			rightX = knobRight.center.x
	    
	    knobRight.minLeft = leftX + (WIDTH / 2);
	    knobLeft.maxLeft = rightX - WIDTH - (WIDTH / 2);
	    
	    fillView.applyProperties({
	    	left: leftX,
		    width: rightX - leftX
		});
		view.fireEvent('change', {leftValue: (leftX + (WIDTH / 2)) / distance, rightValue: (rightX + (WIDTH / 2)) / distance});

	}

	function onKnobStart() {
	    this.backgroundImage = '/images/slider/slider-knob-pressed.png';
	}

	function onKnobEnd() {
	    this.backgroundImage = '/images/slider/slider-knob.png';
	}

	view.addEventListener('postlayout', viewPostLayout);
	knobLeft.addEventListener('move', onKnobMove);
	knobRight.addEventListener('move', onKnobMove);

	knobLeft.addEventListener('start', onKnobStart);
	knobRight.addEventListener('start', onKnobStart);

	knobLeft.addEventListener('end', onKnobEnd);
	knobRight.addEventListener('end', onKnobEnd);

 	return view;
}