JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="https://raw.github.com/gist/3758297/f6677df7fad8c2577993ce6d985881101bc664a0/dragslider.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css">

<div id="slider" style=""></div>
drag me in the middle!

JavaScript

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

(function( $, undefined ) {

$.widget("ui.dragslider", $.ui.slider, {
    
    options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:false}),
    
    _create: function() {
      $.ui.slider.prototype._create.apply(this,arguments);
      this._rangeCapture = false;
    },
    
    _mouseCapture: function( event ) { 
      var o = this.options;

      if ( o.disabled ) return false;
    
      if(event.target == this.range.get(0) && o.rangeDrag == true && o.range == true) {
        this._rangeCapture = true;
        this._rangeStart = null;
      }
      else {
        this._rangeCapture = false;
      }
      
      $.ui.slider.prototype._mouseCapture.apply(this,arguments);

      if(this._rangeCapture == true) {	
          this.handles.removeClass("ui-state-active").blur();	
      }
      
      return true;
    },
    
    _mouseStop: function( event ) {
      this._rangeStart = null;
      return $.ui.slider.prototype._mouseStop.apply(this,arguments);
    },
    
    _slide: function( event, index, newVal ) {
      if(!this._rangeCapture) { 
        return $.ui.slider.prototype._slide.apply(this,arguments);
      }
      
      if(this._rangeStart == null) {
        this._rangeStart = newVal;
      }
      
      var oldValLeft = this.options.values[0],
          oldValRight = this.options.values[1],
          slideDist = newVal - this._rangeStart,
          newValueLeft = oldValLeft + slideDist,
          newValueRight = oldValRight + slideDist,
          allowed;
      
      if ( this.options.values && this.options.values.length ) {
        if(newValueRight > this._valueMax() && slideDist > 0) {
          slideDist -= (newValueRight-this._valueMax());
          newValueLeft = oldValLeft + slideDist;
          newValueRight = oldValRight + slideDist;
        }
        
        if(newValueLeft < this._valueMin()) {
          slideDist += (this._valueMin()-newValueLeft);
    ...