<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
This Pen doesn't use any external CSS resources.