JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<div id="zoom-control">
    <span id="zoom-range"></span>
    <span id="zoom-slider" class="open-cursor"></span>
</div>

CSS

#zoom-control
{
    
    display:inline-block;
    height:120px;
    left:10px;
    opacity:0.04;
    position:absolute;
    top:55px;
    -webkit-user-select:none;
    width:40px;
}
#zoom-control:hover {
    opacity:0.6;
}
#zoom-range
{
    background:white;
    border:1px solid black;
    box-sizing:border-box;
    cursor:pointer;
    display:block;
    height:100%;
    left:17.5px;
    position:absolute;
    width:5px;
}
#zoom-slider
{
    background:black;
    border:1px solid black;
    border-radius:5px;
    box-sizing:border-box;
    display:block;
    height:10px;
    left:10px;
    position:absolute;
    width:20px;
    z-index:1;
}

JavaScript

App = {};

$('#zoom-slider').mousedown(function() {
    $(this).addClass('closed-cursor');
    App.viewer.zooming = true;
    $('body').addClass('no-select');
    
}).mouseup(function(e) {
    if (App.viewer.zooming) {
        $(this).removeClass('closed-cursor');
        App.viewer.zooming = false;
        $('body').removeClass('no-select');
    }
});

$('#zoom-range').click(function(e) {

    var slider = $('#zoom-slider');
    var rangeHeight = parseFloat($('#zoom-range').css('height'));
    var sliderHeight = parseFloat(slider.css('height'));
    
    var y = getZoomCoords(e);
    if (y >= 0 && y <= rangeHeight - sliderHeight)
        slider.css('top',y);
});

$('body').mousemove(function(e) {
    

    
    if (App.viewer.zooming) {
    
        var y = getZoomCoords(e);
        
        if (!App.viewer.zoom) App.viewer.zoom = 0;
        if (Math.abs(App.viewer.zoom - y) > 10) {
            var slider = $('#zoom-slider');
            var rangeHeight = parseFloat($('#zoom-range').css('height'));
            var sliderHeight = parseFloat(slider.css('height'));
            
            if (y >= 0 && y <= rangeHeight - sliderHeight)
                slider.css('top',y);
            
            App.viewer.zoom = y;
        }
    }
    
}).mouseup(function() {
            
    if (App.viewer.zooming) {
        App.viewer.zooming = false;
        $('#zoom-slider').removeClass('closed-cursor');
        $('body').removeClass('no-select');
    }

});

function getZoomCoords(e) {

    if (e.pageY != undefined)
        y = e.pageY;
    else
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   
    var zoomControl = $('#zoom-control').offset();
    
    y -= zoomControl.top;
    
    return y;
}