jquery pane slider is a simple jQuery slider app for resizing two side-by-side flexboxes. This mobile plugin to create a split layout that enables developers to resize two split panels by dragging the mouse or swiping with touch.
How to make use of it:
1. Insert a slider handle into your split layout as follows:
<div id="panelContainer"> <div class="panel one"> <div class="content"> Panel 1 Content </div> </div> <div class="panel two"> <div class="content"> Panel 2 Content </div> <span class="slider"></span> </div> </div>
2. Put the JavaScript file jquery.slider.js
after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/local/jquery.slider.js"></script>
3. Style the split slider within the CSS.
.slider { z-index: 999999; display: block; position: absolute; width: 5px; background-color: #1ABC9C; left: 0; top: 0; bottom: 0; overflow: visible; user-select: none; } .slider::before { content: ""; position: absolute; left: 0.25rem; top: 50%; height: 1.5rem; width: 0.5rem; background-color: #1ABC9C; cursor: col-resize; }
Easy Layout Splitter/Resizer For Developer, jquery pane slider Plugin/Github
See Demo And Download
Official Website(KurtKellens): Click Here
This superior jQuery/javascript plugin is developed by KurtKellens. For extra Advanced Usages, please go to the official website.
Be First to Comment