Search code examples
jqueryjquery-uilineresizablejquery-ui-resizable

How to make resizable line with jQuery-ui?

About the resizable stuff, I know about resizable widget from jQuery and I used to use it for div.

But, is there any way to make something like a resizable line with jQuery-ui?

Solution

  • You can see line as div with height: 1px. Than simply use UI code:

    $(document).ready(function() {
  $(".line").resizable({
    minWidth: 150,
    maxWidth: 300,
    handles: 'e, w'
  });
});
    .line {
  min-width: 150px;
  height: 2px;
  background: red;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<div class="line"></div>