CODEWITHSUNDEEP
jqueryjquery-uisliderjquery-ui-resizable
Rivers
Rivers

Reputation: 2102

Using Jquery UI Slider to trigger Resizable

Has anyone used the slider to trigger resizable? This way, we can use the values from the slider to manipulate the width and height of another element. Here is a an example:

$("#myslider").slider({
        value: 50,
        max: 100,
        min: 0,
        stop: function(event, ui) {
            $( ".scalablediv" ).resizable({
               resize: function(event, ui) {
               ui.size.width = ui.value;
            }
     });        
   }
});

<div class="scalablediv"></div>

Upvotes: 1

Views: 1886

Answers (1)

Xnake
Xnake

Reputation: 940

You should put the trigger on slide event of the slider, and inside you can set the width and height of the scalablediv. Making scalablediv to resizable doesn't actually resize it but instead making it to a resizable object, which is different. Here's the fiddle for the example: http://jsfiddle.net/6KSbp/1/. Thanks

Upvotes: 1

Related Questions