1 //this code solves this problem: http://stackoverflow.com/questions/5955343/

     2 

     3 (function( $, undefined ) {

     4 

     5 $.widget("ui.dragslider", $.ui.slider, {

     6     

     7     options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:false}),

     8     

     9     _create: function() {

    10       $.ui.slider.prototype._create.apply(this,arguments);

    11       this._rangeCapture = false;

    12     },

    13     

    14     _mouseCapture: function( event ) { 

    15       var o = this.options;

    16 

    17       if ( o.disabled ) return false;

    18     

    19       if(event.target == this.range.get(0) && o.rangeDrag == true && o.range == true) {

    20         this._rangeCapture = true;

    21         this._rangeStart = null;

    22       }

    23       else {

    24         this._rangeCapture = false;

    25       }

    26       

    27       $.ui.slider.prototype._mouseCapture.apply(this,arguments);

    28 

    29       if(this._rangeCapture == true) {	

    30           this.handles.removeClass("ui-state-active").blur();	

    31       }

    32       

    33       return true;

    34     },

    35     

    36     _mouseStop: function( event ) {

    37       this._rangeStart = null;

    38       return $.ui.slider.prototype._mouseStop.apply(this,arguments);

    39     },

    40     

    41     _slide: function( event, index, newVal ) {

    42       if(!this._rangeCapture) { 

    43         return $.ui.slider.prototype._slide.apply(this,arguments);

    44       }

    45       

    46       if(this._rangeStart == null) {

    47         this._rangeStart = newVal;

    48       }

    49       

    50       var oldValLeft = this.options.values[0],

    51           oldValRight = this.options.values[1],

    52           slideDist = newVal - this._rangeStart,

    53           newValueLeft = oldValLeft + slideDist,

    54           newValueRight = oldValRight + slideDist,

    55           allowed;

    56       

    57       if ( this.options.values && this.options.values.length ) {

    58         if(newValueRight > this._valueMax() && slideDist > 0) {

    59           slideDist -= (newValueRight-this._valueMax());

    60           newValueLeft = oldValLeft + slideDist;

    61           newValueRight = oldValRight + slideDist;

    62         }

    63         

    64         if(newValueLeft < this._valueMin()) {

    65           slideDist += (this._valueMin()-newValueLeft);

    66           newValueLeft = oldValLeft + slideDist;

    67           newValueRight = oldValRight + slideDist;

    68         }

    69 

    70         if ( slideDist != 0 ) {

    71           newValues = this.values();

    72           newValues[ 0 ] = newValueLeft;

    73           newValues[ 1 ] = newValueRight;

    74           

    75           // A slide can be canceled by returning false from the slide callback

    76           allowed = this._trigger( "slide", event, {

    77             handle: this.handles[ index ],

    78             value: slideDist,

    79             values: newValues

    80           } );

    81           

    82           if ( allowed !== false ) {

    83             this.values( 0, newValueLeft, true );

    84             this.values( 1, newValueRight, true );

    85           }

    86           this._rangeStart = newVal;

    87         }

    88       }

    89       

    90       

    91      

    92     },

    93     

    94     

    95     /*

    96     //only for testing purpose

    97     value: function(input) {

    98         console.log("this is working!");

    99         $.ui.slider.prototype.value.apply(this,arguments);

   100     }

   101     */

   102 });

   103 

   104 })(jQuery);