Jquery ui draggable and resizable with containment

by vijayweb

HTML

<div id="container"></div>
    <div id="slider"></div>
    
    
    
    <div class="image-bg-gradient">
  <p>
    just some text to overlay...
  </p>
</div>

CSS

#container { width: 800px; height: 600px; background-color:blue; position:absolute;}


#slider {
    width: 15px;
}



html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


.image-bg-gradient {
  width: 400px;
  height:300px;
  background: linear-gradient(rgba(255, 255, 255, 0.7),
  rgba(0, 0, 255, 0.9)),
  url(https://unsplash.it/400/300) no-repeat;
  padding: 10px;
}

JavaScript

$(document).ready(function () {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: 1,
            orientation: "vertical",
            slide: function (e, ui) {
//                $('#box').css('opacity', ui.value)
                 $("#container").css("background-color", "rgba(255,0,0,"+ui.value+")");

            }
        })
    });