<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<path class="sliderProgressBar" fill="#FFFFFF" d="M550,340H274c-6.627,0-12-5.373-12-12v-1c0-6.627,5.373-12,12-12h276c6.627,0,12,5.373,12,12v1
C562,334.627,556.627,340,550,340z"/>
<circle class="valueDisplay" fill="#62438A" cx="268" cy="282.5" r="30"/>
<text class="value" x="268" y="288">0</text>
<path class="sliderHandle" fill="#62438A" d="M268,347.5L268,347.5c-3.314,0-6-2.686-6-6v-28c0-3.314,2.686-6,6-6l0,0c3.314,0,6,2.686,6,6v28
	C274,344.814,271.314,347.5,268,347.5z"/>
</svg>
body {
  overflow: hidden;
  text-align:center;
  background:#EEE;
}
body,html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
svg{
  width:100%;
  height:100%;
  overflow:hidden;
  visibility:hidden;
}
.value {
  fill:#FFF;
  font-weight:bold;
  text-anchor:middle;
  pointer-events: none;
}
View Compiled
const handle = document.querySelector('.sliderHandle'),
    progressBar = document.querySelector('.sliderProgressBar');
let circleValue = document.querySelector('.valueDisplay'),
    textValue = document.querySelector('.value');
// Initial configuration
gsap.set(circleValue,{y:45,attr: {r:0},opacity:0})
gsap.set(textValue,{y:45,opacity:0})
gsap.set('svg', {visibility: 'visible'})


const sliderValUpdate = () => {
  dragVal = Math.round((gsap.getProperty(handle,'x') / 288 ) * 100);
  textValue.textContent = dragVal;
  gsap.set(circleValue,{
    x: gsap.getProperty(handle,'x')
  });
  gsap.set(textValue,{
    attr: {
        x: gsap.getProperty(handle,'x') + 268
      }
  });
}

Draggable.create(handle, {
  type:"x",
  cursor:'pointer',
  bounds:progressBar,
  onPress: () => {
    gsap.to(circleValue,0.15,{
      y:0,
      attr: {
        r:30
      },
      opacity:1,
      ease:"back"
      })  
    gsap.to(textValue,0.15,{
      y:0,
      opacity:1,
      ease:"back"
      })
    },
  onRelease: () => {
    gsap.to(circleValue,0.15,{
      y:45,
      attr : {
        r:0
      },
      opacity:0,
      ease:"back.in"
    })
    gsap.to(textValue,0.15,{
      y:45,
      opacity:0,
      ease:"back.in"
      })
  },
  onDrag: () => {
    sliderValUpdate();
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js