Double Slider

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

// Download from here http://cl.ly/3O2g3b3D0Y0x
// Screencast http://www.screenr.com/zhs7
// folder:
// ti.doubleslider

function Draggable(args) {
    args = args || {};
    args.backgroundImage = '/ti.doubleslider/slider-knob-normal.png'
    var view = this.view = Ti.UI.createView(args),
        parentView = this.parentView = null,
        self = this;
    
    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 currentPoint = 0;
    var startPoint = 0;
    function onTouchStart(_event) {
        if(_event.source != view) return;
        view.backgroundImage = '/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 global = view.convertPointToView({
            x: _event.x,
            y: _event.y
        }, parentView).x - (startPoint / 2);
        
        if(global <= 11 || global >= parentView.rect.width - 11) return;
        self.x = Math.round(global);
        
        if(self.onTouchMove) {
            self.onTouchMove(self.center);
        }
        
    }
    function onTouchEnd(_event) {
        if(_event.source != view) return;
        view.backgroundImage = '/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 min    = args.minValue   || 0,
        max    = args.maxValue   || 100,
        start  = args.startValue || 0,
        end    = args.endValue   || args.maxValue || 100,
    
        left = args.left,
        right = args.right,
        width = args.width,
        
        self = this;

    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: 12,
        right: 12,
        height: Ti.UI.FILL,
        backgroundLeftCap: 5,
        backgroundImage: '/ti.doubleslider/slider-border.png'
    });
    mainView.add(innerView);
    var bar = Ti.UI.createView({
        top: 7,
        bottom: 7,
        backgroundLeftCap: 5,
        backgroundImage: '/ti.doubleslider/slider-selected.png'
    });
    mainView.add(bar);
    var leftKnob = new Draggable({
        width: 23, 
        height: 23, 
        center: {x : 0, y: 0},
        borderRadius: 12
    });
    var rightKnob = new Draggable({
        width: 23,
        height: 23,
        center: {x : 0, y: 0},
        borderRadius: 12
    });
    
    leftKnob.addToView(mainView);
    rightKnob.addToView(mainView);
    
    function round(num) {
        return Math.round(num*100) / 100;
    }
    this.getValues = function() {
        var width = mainView.rect.width,
            total = max - min,
            ratio = width / total;
        return {
            // minValue: round((leftKnob.x + 11) / ratio),
            // maxValue: round((rightKnob.x - 11) / ratio)
            minValue: round((leftKnob.x - 11) / ratio),
            maxValue: round((rightKnob.x + 11) / ratio)
        }
    }
    function onChange() {
        if(self.onChange) {
            self.onChange(self.getValues());
        }
    }
    
    leftKnob.onTouchMove = function(_center){
        if(_center.x > rightKnob.x - 21) {
            _center.x = rightKnob.x - 21;
            leftKnob.x = _center.x;
        }
        bar.left = _center.x;
        bar.width = rightKnob.x - leftKnob.x;
        onChange();
    }
    rightKnob.onTouchMove = function(_center){
        if(_center.x < leftKnob.x + 21) {
            _center.x = leftKnob.x + 21;
            rightKnob.x = _center.x;
        }
        bar.left = leftKnob.x;
        bar.width = rightKnob.x - leftKnob.x;
        onChange();
    }
    
    function onPostLayout(e) {
        mainView.removeEventListener('postlayout', onPostLayout);        
        var width = mainView.rect.width,
            total = max - min,
            ratio = width / total;
        leftKnob.center = { x: (start * ratio) + 11, y:12};
        rightKnob.center = { x: (ratio * end) - 11, y:12};
        bar.width = rightKnob.x - leftKnob.x;
        bar.left = leftKnob.x;

   }
    mainView.addEventListener('postlayout', onPostLayout);

    this.view = mainView;
}

module.exports = DoubleSlider;

Hi,

Thanks for your component. I have improved it for my needs:

• my version allows the cursors to have the same value (yours is limited by the with of the knobs)
• it works fine at the boundaries (you can't reach min or max everytime with yours)

You can find my fork here:
https://gist.github.com/fabiochelly/5311740