app.js

var DoubleSlider = require('ti.doubleslider/widget');

var win = Ti.UI.createWindow();

var doubleSlider = new DoubleSlider({
    top: 50,
    width: 300,
    minValue: 0,
    maxValue: 100,
    startValue: 30, 
    endValue: 90
});

win.add(doubleSlider.view);

doubleSlider.onChange = function(values) {
    var min = values.minValue;
    var max = values.maxValue;
    // do whatever
};

win.open();

win.addEventListener('open', function(){
    var values = doubleSlider.getValues();
    // do whatever
});

widget.js

//ti.doubleslider
var knobSize = 23;
var halfKnobSize = 12;

function Draggable(args) {
    args = args || {};
    args.backgroundImage = '/modules/ti.doubleslider/slider-knob-normal.png';
    var view = this.view = Ti.UI.createView(args),
        parentView = this.parentView = null,
        self = this;

    Object.defineProperty(this, 'zIndex', {
		get: function(){
			return view.zIndex;
		},
		set: function(_value) {
			view.zIndex = _value;
		}
	});
	
    Object.defineProperty(this, 'x', {
        get: function(){
            return view.center.x;
        },
        set: function(_value) {
            view.center = {x: _value, y: self.y};
        }
    });

    Object.defineProperty(this, 'y', {
        get: function(){
            return view.center.y;
        },
        set: function(_value) {
            view.center = {x: self.x, y: _value};
        }
    });
    Object.defineProperty(this, 'center', {
        get: function() {
            if(!view.center) {
                return {};
            }
            return view.center;
        },
        set: function(_value){
            view.center = _value
        }
    });
    var startPoint = 0;
    function onTouchStart(_event) {
        if(_event.source != view) return;
        view.backgroundImage = '/modules/ti.doubleslider/slider-knob-pressed.png';
        
        var global = view.convertPointToView({
            x: _event.x,
            y: _event.y
        }, parentView);
        
        startPoint = _event.x;
        
        if(self.onTouchStart) {
            self.onTouchStart(global);
        }
    }
    function onTouchMove(_event) {
        if(_event.source != view) return;         
        
	    var parentPoint = view.convertPointToView({ x: _event.x, y: _event.y }, parentView);
	    var global = parentPoint.x - (startPoint / 2);
        
        if (global <= halfKnobSize) {
	        self.x = halfKnobSize;
        }
        else if (global >= parentView.rect.width - halfKnobSize) {
	        self.x = parentView.rect.width - halfKnobSize;
        }
        else self.x = Math.round(global);
        
        if (self.onTouchMove) {
            self.onTouchMove(self.center);
        }
        
    }
    function onTouchEnd(_event) {
        if(_event.source != view) return;
        view.backgroundImage = '/modules/ti.doubleslider/slider-knob-normal.png';
        if(self.onTouchEnd) {
            self.onTouchEnd(self.center);
        }
    }
    
    
    this.addToView = function(_view) {
        parentView = _view;
        parentView.add(this.view);
        parentView.addEventListener('touchstart', onTouchStart);
        parentView.addEventListener('touchmove', onTouchMove);
        parentView.addEventListener('touchend', onTouchEnd);
    }
}

function DoubleSlider(args) {
    args = args || {};
    args.height = 23;
	var finalMin   = args.minValue;
	var finalMax   = args.maxValue;
	var finalStart = args.startValue;
	var finalEnd   = args.endValue;
	var sliderMax  = 1000;
	
    var min    = 0,
        max    = sliderMax,
        start  = sliderMax * (finalStart - finalMin) / (finalMax - finalMin),
        end    = sliderMax * (finalEnd   - finalMin) / (finalMax - finalMin),
    
        left = args.left,
        right = args.right,
        width = args.width,
        
        self = this;
	

	Ti.API.info("min="+min, "max="+max, "start=" + start, "end=" + end);
	
    if(left && right) delete args.width;
       
    delete args.minValue;
    delete args.maxValue;
    delete args.startValue;
    delete args.maxValue;
    
    var mainView = Ti.UI.createView(args);
    var innerView = Ti.UI.createView({
        left: halfKnobSize,
        right: halfKnobSize,
        height: Ti.UI.FILL,
        backgroundLeftCap: 5,
        backgroundImage: '/modules/ti.doubleslider/slider-border.png'
    });
    mainView.add(innerView);
    var bar = Ti.UI.createView({
        top: 7,
        bottom: 7,
        backgroundLeftCap: 5,
        backgroundImage: '/modules/ti.doubleslider/slider-selected.png'
    });
    mainView.add(bar);
    var leftKnob = new Draggable({
        width: knobSize, 
        height: knobSize, 
        center: {x : 0, y: 0},
        borderRadius: halfKnobSize,
	    zIndex: 100
    });
    var rightKnob = new Draggable({
        width: knobSize,
        height: knobSize,
        center: {x : 0, y: 0},
        borderRadius: halfKnobSize,
	    zIndex: 101
    });
    
    leftKnob.addToView(mainView);
    rightKnob.addToView(mainView);
    
    function round(num) {
        return Math.round(num*100) / 100;
    }

	/**
	 * Renvoie la position X de la poignée en fonction de la valeur à atteindre
	 * @param target
	 * @returns {integer}
	 */
	function calculateLeftPos(target) {
		var width = mainView.rect.width;
		var ratio = width / (max - min);
		var prevX = 0;
		var half = width / 2;
		var value;
		for (var x = 0; x < width; x++) {
			value = x + halfKnobSize * (x / half - 1);
			value = min + round(value / ratio);
			if (value > target) return prevX;
			prevX = x;
		}
		return width;
	}
	
    this.getValues = function() {
        var width = mainView.rect.width,
            total = max - min,
            ratio = width / total;
	    var half = width / 2;
	    var val1, val2;
	    
	    if (leftKnob.x <= halfKnobSize) val1 = min;
	    else if (leftKnob.x >= width - halfKnobSize) val1 = max;
	    else {
		    var delta1 = halfKnobSize * (leftKnob.x / half - 1);
		    val1 = leftKnob.x + delta1;
		    val1 = min + round(val1 / ratio);
	    }

	    if (rightKnob.x <= halfKnobSize) val2 = min;
	    else if (rightKnob.x >= width - halfKnobSize) val2 = max;
	    else {
		    var delta2 = halfKnobSize * (rightKnob.x / half - 1);
		    val2 = rightKnob.x + delta2;
		    val2 = min + round(val2 / ratio);
	    }

	    val1 = (finalMax - finalMin) * val1 / sliderMax + finalMin;
	    val2 = (finalMax - finalMin) * val2 / sliderMax + finalMin;
	    return { minValue: val1, maxValue: val2 };
    };
    function onChange() {
        if(self.onChange) {
            self.onChange(self.getValues());
        }
    }
    
    leftKnob.onTouchMove = function(_center){
        if(_center.x > rightKnob.x) {
            _center.x = rightKnob.x;
            leftKnob.x = _center.x;
        }
        bar.left = _center.x;
        bar.width = rightKnob.x - leftKnob.x;

	    if (leftKnob.zIndex < rightKnob.zIndex) {
		    var temp = rightKnob.zIndex;
		    rightKnob.zIndex = leftKnob.zIndex;
		    leftKnob.zIndex = temp;
	    }

	    onChange();
    };
    rightKnob.onTouchMove = function(_center){
        if(_center.x < leftKnob.x) {
            _center.x = leftKnob.x;
            rightKnob.x = _center.x;
        }
        bar.left = leftKnob.x;
        bar.width = rightKnob.x - leftKnob.x;
	    
	    //On place le curseur de droite au dessus de celui de gauche
	    if (rightKnob.zIndex < leftKnob.zIndex) {
		    var temp = rightKnob.zIndex;
		    rightKnob.zIndex = leftKnob.zIndex;
		    leftKnob.zIndex = temp;
	    }
	    
        onChange();
    };
    
    function onPostLayout(e) {
        mainView.removeEventListener('postlayout', onPostLayout);        
        leftKnob.center = { x: calculateLeftPos(start), y:halfKnobSize};
        rightKnob.center = { x: calculateLeftPos(end), y:halfKnobSize};
        bar.width = rightKnob.x - leftKnob.x;
        bar.left = leftKnob.x;
   }
    mainView.addEventListener('postlayout', onPostLayout);

    this.view = mainView;
}

module.exports = DoubleSlider;