How to set the minimum and maximum resize columns?

Hello. Found suitable for my needs the script jsfiddle.net/pkryfjzz/7

How to set the minimum and maximum resize the first column (minimum 50% maximum 75%)?

<table class="wrapper">
<tbody><tr>
 <td class="test" style>current</td>
 <td class="test2" style>neighbor2</td>
</tr>
</tbody></table>

$(document).ready(function() {
 var container = $(".wrapper");
 var numberOfCol = 1;
 $(".test").css('width', 50 / numberOfCol + '%');

 var sibTotalWidth;
$(".test").resizable({
 handles: 'e',
 start: function(event, ui) {
 sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth();
},
 stop: function(event, ui) {
 var cellPercentWidth = 100 * ui.originalElement.outerWidth() / container.innerWidth();
 ui.originalElement.css('width', cellPercentWidth + '%');
 var nextCell = ui.originalElement.next();
 var nextPercentWidth = 100 * nextCell.outerWidth() / container.innerWidth();
 nextCell.css('width', nextPercentWidth + '%');
},
 resize: function(event, ui) {
 ui.originalElement.next().width(sibTotalWidth - ui.size.width);
}
});
});
July 8th 19 at 16:03
1 answer
July 8th 19 at 16:05
Solution
jsfiddle.net/pkryfjzz/9
Using css to specify min/max-width for both blocks
Thank you very much, helped. - Amos_Leffl commented on July 8th 19 at 16:08

Find more questions by tags JavaScriptjQuery