JSFiddle - React, Tailwind, and code Playground

HTML

<input id="zoom" type="range" name="zoom" min="10" max="100" step="1" value="40" >
<div id="zone"></div>

CSS

#zoom{
}
#zone{
    background:none repeat scroll 0 0 #333;
    border:1px solid #000000;
    height:200px;
    margin:-27px 0 0 155px;
    width:200px;
}

JavaScript

$("#zone").mouseenter(function(){
       $(this).css({background:"red"});
  });
  
  $("#zone").mouseleave(function(){
       $(this).css({background:"black"});
  });