JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">

    <input class="range" min="0" step="290" max="9860" type="range">
    
    <div class="obj" style="background-image: url(http://pingo.ge/uploads/products/5c779f0777112.jpg)"></div>

</div>

<input type="text" id="test">

CSS

.box{width: 290px;
    height: 380px;
    bordeR:  1px solid red;
    position: relative;
}

.range{
    border: 1px solid red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 124;
}
.obj{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

JavaScript

$('.range').on('input', function(){
	$("#test").val($(this).val());
	$('.obj').css({
    	'background-position': -$(this).val() + 'px'
    })
})