Demo of Resizable with maxWidth option

100

200

400

While resizing, the maximum width of the element is restricted to value of maxWidth option. We can set ( update ) the value and read the set value of maxWidth.

By selecting the radio buttons we can change the value of maxWidth option. You can try to drag the element in left or right direction after changing the selections of radio buttons.
We are reading the set value and displaying the same.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
maxWidth:100,
handles : "n,e,ne,w,nw"
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "maxWidth" );
$('#d1').html( " <b>Value of maxWidth Option:</b> " + read_opt );
/////// Clikc event of radio buttons///
$("input:radio[name=r1]").click(function() {
var sel=$(this).val(); 
// set the option value
$( "#resize_id" ).resizable( "option", "maxWidth", sel );
// get the option value 
var read_opt = $( "#resize_id" ).resizable( "option", "maxWidth" ); 
$('#d1').html( " <b>Status of maxWidth:</b> " + read_opt );
})
////Click event end///
})
</script>

HTML

<table class='table'>
<tr><td>
<input type='radio' name='r1' id='r1' value=100 checked>100</td>
<td><input type='radio' name='r1' id='r2' value=200>200</td>
<td><input type='radio' name='r1' id='r2' value=400>400</td>
<td><button type='button' class='btn btn-secondary'  id=d1></button>
</td></tr></table>

<br><br>

<div class='row'> <div class='col-md-12'>

<div id="resize_id" class=resize_cl></div>

</div></div>