JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  
</div>

<div class="controls">
  <span>Size</span>
  <input type="range" class="i1" max="150">
  
  <span>Position X</span>
  <input type="range" class="i2">
  
  <span>Position Y</span>
  <input type="range" class="i3">
</div>

CSS

html, body{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main{
   background-image: url(https://picsum.photos/600/400/?image=355);
   width: 300px;
   height: 300px;
   border: 2px solid red;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.controls{
  width: 12rem;
  background: rgba(0,0,0,0.9);
  border-radius: 5px;
  padding: 1rem;
  color: #fff;
  top: 1rem;
  position: fixed;
  right: 1rem;
}

.controls span{
  width: 100%;
  display: block;
}

.controls input{
  margin-bottom: 1rem;
}

JavaScript

$('.i1').on('input', inputSize);
$('.i2').on('input', inputX);
$('.i3').on('input', inputY);

function inputSize(){
	var val = $(this).val();
  $('.main').css('background-size', 'auto ' + val + '%');
}

function inputX(){
	var val = $(this).val();
  $('.main').css('background-position-x', val+'%');
}

function inputY(){
	var val = $(this).val();
  $('.main').css('background-position-y', val+'%');
}