Tweaked jQuery Slider Demo

Demonstrates the modificatoins I made to interaction with the jQuery slider for my timerange selector (Other time-specific changes were omitted for simplicity)

by cincodenada

HTML

<div style="padding: 20px">
    <div id="slider"></div>
    <br/>
    <div id="timerange"></div>
</div>

CSS

div div { width: 100%; }

JavaScript

//Timerange code
$.widget('cincodenada.timerange',$.ui.slider,{
    options: {
        range: true,
        clickdist: 0.25,
    },

    _slide: function(event, index, newVal) {
        var newValues,
            allowed = true;

        if(this._draggingRange === true) {
            if(newVal !== this._rangeAnchor) {
                diff = newVal - this._rangeAnchor;
                newValues = this.values();
                for(i=0;i<2;i++) {
                    newValues[i] += diff;
                }
                allowed = true;
                for(i=0;i<2;i++) {
                    thisAllowed = this._trigger( "slide", event, {
                        handle: this.handles[ i ],
                        value: newValues[i],
                        values: newValues
                    } );
                    allowed = allowed && thisAllowed;
                }
                if ( allowed !== false ) {
                    this.values(newValues);
                }
                this._rangeAnchor = newVal;
            }
            return;
        } else if(this._newSel === true) {
            diff = newVal - this.values(0);
            if(Math.abs(diff) > this._clickDistNorm()) {
                if(diff < 0) {
                    index = this._handleIndex = 0;
                } else {
                    index = this._handleIndex = 1;
                }
                this._trigger( "start", event, {
                    handle: this.handles[ index ],
                    value: this.value()
                })
                //We're done starting the selection
                this._newSel = false;
                return;
            }
        }
        return this._super(event, index, newVal);
    },
    _start: function(event, index) {
		position = { x: event.pageX, y: event.pageY };
		normValue = this._normValueFromMouse( position );
        if(this.handles.length == 2 && this.options.range === true && 
            //Move the range by clicking on it
      ...