<div class="demoContainer">
  <div class="projHeader">
    <div class="primaryText">Range Slider</div>
    <div class="createdBy">Created By <a href="http://www.dropinks.com/range-slider-interaction-using-jquery/">Dropinks</a>/<a href="https://dribbble.com/shots/13915508-Range-Slider-interaction" target="_blank">Dribbble</a></div>
    <p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
  </div>
  <div class="sliderContainer" id="sliderContainer">
    <div class="slider slider_a" id="slider_a"></div>
    <div class="slider slider_b" id="slider_b"></div>
    <div class="slider slider_c" id="slider_c"></div>

    <div class="slider_adj slider_adj_1" id="slider_adj_1"></div>     
    <div class="slider_adj slider_adj_2" id="slider_adj_2"></div>
  </div>
</div>

.primaryText{
	font-weight: 300;
	font-size: 50px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
	font-weight: 300;
	font-size: 25px;
}
.createdBy {
    font-weight: 300;
    font-size: 17px;
    margin-top: 10px;
}
.createdBy a{
    color: #333;
    font-weight: 500;
}
.message {
    background: rgba(255, 255, 255, 0.31);
    padding: 10px;
    display: inline-block;
    text-align: center;
    color: #000;
    margin: 25px 0;
    font-size: 13px;
    box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
    border-radius: 4px;
}
.projHeader{
	text-align: center;
}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}

body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}



.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 400px;} 
.sliderContainer{position: relative; border-radius: 20px; 
  background: #6a6a6a; width: 400px; height: 10px; margin-top: 40px;}
.sliderContainer:after{content:""; clear: both; display: block; }
.slider{height: 10px; float: left;}
.slider_a{background: transparent;}
.slider_b{background: #fd1874; border-radius: 20px;}
.slider_c{background: transparent;}

.slider_adj{position: absolute; padding: 3px 10px; background: #fff; top: 12px; cursor: move; user-select: none; z-index: 1; font-size: 13px; color: #333; border-radius: 20px; width: 20px; text-align: center;}
.slider_adj_1{}
.slider_adj_2{top: -28px;z-index: 3}

var sliderContainer, sliderContainerWt;
var sliderHandleWt;
$(document).ready(function(){
  sliderContainer = $("#sliderContainer");
  sliderContainerWt = sliderContainer.outerWidth();
  sliderHandleWt = $("#slider_adj_1").outerWidth();

  setLeftPosition();
  setDraggable();
  bindMouseUp();

  updateGraph();
});

function setLeftPosition(){
  var wt = sliderContainerWt/3;
  $(".slider").css({"width": wt+"px" })
  var sliderHandlePos_1 = wt-sliderHandleWt/2;
  var sliderHandlePos_2 = wt*2-sliderHandleWt/2;
  $("#slider_adj_1").css({"left": sliderHandlePos_1+"px"});
  $("#slider_adj_2").css({"left": sliderHandlePos_2+"px"});
}

function updateGraph(){
  var a_wt = parseInt(($("#slider_a").width()/sliderContainerWt*100).toFixed(0));
  var b_wt = parseInt(($("#slider_b").width()/sliderContainerWt*100).toFixed(0));
  var c_wt = parseInt(($("#slider_c").width()/sliderContainerWt*100).toFixed(0));

  $("#slider_adj_1").html(a_wt);
  $("#slider_adj_2").html(b_wt+a_wt);

  return { a: a_wt, 
          b: b_wt,
          c: c_wt 
         }
}

function bindMouseUp(){
  $("#slider_adj_1, #slider_adj_2").on("mouseout", function(){
    $("#slider_adj_1, #slider_adj_2").draggable( "destroy" );
  });
  $("#slider_adj_1, #slider_adj_2").on("mouseover", function(){
    setDraggable();
  });
}

function setDraggable(){
  var maxLeft = $("#slider_a").offset().left-(sliderHandleWt/2);
  var maxRight = $("#slider_b").offset().left+$("#slider_b").outerWidth()-(sliderHandleWt/2);
  var startX, start_a_Wt, start_b_Wt, start_c_Wt;
  $("#slider_adj_1").draggable({
    axis: 'x',
    containment: [ maxLeft, 0, maxRight, 0 ],
    refreshPositions: true,
    start: function(event, ui){
      startX = $(this).position().left;
      start_a_Wt = $("#slider_a").width();
      start_b_Wt = $("#slider_b").width();
    },
    drag: function(event, ui){
      var endX = $(this).position().left;
      var finalX = endX - startX;
      var slider_a = start_a_Wt + finalX;
      var slider_b = start_b_Wt - finalX;
      $("#slider_a").css("width", slider_a+"px");
      $("#slider_b").css("width", slider_b+"px");
      updateGraph();
    },
    stop: function(event, ui){
      maxLeft = $("#slider_a").position().left;
      maxRight = $("#slider_c").position().left;
    }
  });

  var maxLeft_2 = $("#slider_a").offset().left+$("#slider_a").outerWidth()-(sliderHandleWt/2);
  var maxRight_2 = $("#slider_a").offset().left+sliderContainerWt-(sliderHandleWt/2);
  $("#slider_adj_2").draggable({
    axis: 'x',
    containment: [ maxLeft_2, 0, maxRight_2, 0 ],
    start: function(event, ui){
      startX = $(this).position().left;
      start_b_Wt = $("#slider_b").width();
      start_c_Wt = $("#slider_c").width();
    },
    drag: function(event, ui){
      var endX = $(this).position().left;
      var finalX = endX - startX;
      var slider_b = start_b_Wt + finalX;
      var slider_c = start_c_Wt - finalX;
      $("#slider_b").css("width", slider_b+"px");
      $("#slider_c").css("width", slider_c+"px");
      updateGraph();
    },
    stop: function(event, ui){
      maxLeft_2 = $("#slider_b").offset().left;
      maxRight_2 = $("#slider_c").offset().left + $("#slider_c").width();
    }
  });
}