JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="slider"></div>
</div>

CSS

#container {
    height: 300px;
    width: 300px;
    position: relative;
    background: #eee;
}
#slider {
    height: 80px;
    width: 80px;
    background: red;
}

JavaScript

var speed = 1.5; // higher number = faster animation
var originalPosition = null;

$('#container').mousedown(function(){
    var $slider = $('#slider');
    var start = $slider.position().top;
    if(!originalPosition) {
        originalPosition = {top: start};
    }
    var end = $(this).height() - $slider.height();
    var duration = (2/speed) * (end - start);
    $slider.css({
        position: 'absolute',
        top: start+'px',
    }).stop().animate({
        top: end+'px'
    },duration);
}).mouseup(function(){
    var $slider = $('#slider');
    $slider.stop();
    var start = $slider.position().top;
    var end = originalPosition.top;
    var duration = (2/speed) * (start - end);
    $slider.animate({
        top: end+'px'
    },duration,function(){
        $(this).css({position: 'static'});
    });
});