<div class="container">
  <div class="projHeader">
		<div class="primaryText">Fluid Slider</div>
		<div class="createdBy">Created By 
      <a href="http://www.dropinks.com/fluid-slider-using-svg-gooey-effect/">Dropinks</a>
    </div>
    <p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
  </div>
  <div class="slider-1" id="slider-1">
    <div class="innerContainer" id="innerContainer">
      <span class="innerPercentage" id="innerPercentage">5</span>
    </div>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-flt">
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
    </filter>
  </defs>
</svg>

html, body{
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
.container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}



.slider-1{filter: url("index.html#gooey");-webkit-filter: url("#gooey"); width: 100%; height: 100%; margin: 30px auto;}
.slider-1{background: #4486ec; width: 300px; height: 15px; border-radius: 10px; padding: 3px;}
.innerContainer, .innerPercentage{position: absolute;  background: #fff; width: 10px; height: 10px; border-radius: 50%; cursor: pointer;}
.innerContainer{left: 50px; top: 5px !important;   }
.innerPercentage{background: #fff; width: 26px; height: 26px; font-size: 9px; display: inline-block; left: -8px; top: -7px; transform: scale(0.8) translateY(0); text-align: center; line-height: 18px; border: 4px solid #4486ec; box-sizing: border-box; transition: 0.3s all ease; user-select: none;}
.innerContainer.active .innerPercentage{transform: scale(1.5)  translateY(0px); top: -35px;  transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);}

















body{
	background: -webkit-linear-gradient(-45deg, rgba(239,247,255,1) 0%, rgba(239,247,255,1) 15%, rgba(180,188,221,1) 100%);
}
.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;
    font-family: roboto;
    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;}

var dragMe, sliderWt;

window.onload=function(){
  dragMe = document.getElementById("innerContainer");
  sliderWt = $("#slider-1").innerWidth() - dragMe.offsetWidth - 3; //3-padding for slider
  innerPercentage = document.getElementById("innerPercentage");
  dragMe.addEventListener("mousedown", function(){addClass()}, false);
  document.addEventListener("mouseup", function(){removeClass()}, false);
  $(dragMe).draggable({
    containment: 'parent',
    axis: 'x',
    drag: function(event, ui){calcPercent(ui.item);}
  });
}

function addClass(){
  dragMe.classList.add("active");
}

function removeClass(){
  dragMe.classList.remove("active");
}

function calcPercent(){
  var left = dragMe.offsetLeft;
  var percent = parseInt((left/sliderWt)*100);
  innerPercentage.innerText = percent;
}