Create resizable split views or Divs

Hi,

We do not have this example but there is a <a href="https://preview.keenthemes.com/html/metronic/docs/general/draggable/cards">Draggable plugin</a> that you can use to implement the such feature as per your custom requirements.

We used it to implement the resizable screenshots in the <a href="https://keenthemes.com/metronic/docs">Metronic docs</a> using the below js code:

<pre lang="js"> "use strict"; // Class definition var KTAppHero = function () { // Private variables var preview; var previewDrag; var previewSlider; var previewLight; var previewLightImg; var previewDark; var previewDarkImg; var slide = function(e) { const sliderPos = e.target.value; // Update the width of the foreground image KTUtil.css(previewDark, 'width', `${sliderPos}%`); // Update the position of the slider button KTUtil.css(previewDrag, 'left', `calc(${sliderPos}% - 0px)`); } var handlePreview = function() { calculate(); resize(); previewSlider.addEventListener("input", slide); previewSlider.addEventListener("change", slide); } var calculate = function() { const width = KTUtil.css(preview, 'width'); KTUtil.css(previewLightImg, 'width', width); KTUtil.css(previewDarkImg, 'width', width); } var resize = function() { // Window resize Handling window.addEventListener('resize', calculate); } // Public methods return { init: function () { preview = document.querySelector('.preview'); previewSlider = document.querySelector('.preview .preview-slider'); previewDrag = document.querySelector('.preview .preview-drag'); previewLight = document.querySelector('.preview .preview-light'); previewLightImg = document.querySelector('.preview .preview-light > img'); previewDark = document.querySelector('.preview .preview-dark'); previewDarkImg = document.querySelector('.preview .preview-dark > img'); if (!preview) { return; } handlePreview(); } }; }(); // On document ready KTUtil.onDOMContentLoaded(function () { KTAppHero.init(); }); </pre>

This JS code refers to the above Metronic's Docs page hero block's docs UI preview box.

Regards.