I am trying to increase the width of an element (.inner) using jQuery Ui slider. This is somehow working fine but I need to keep the center of the inner always in the center of .wrapper. so I think I need to add negative values for top and left but I do not know how to achieve them. Do I have to create two custom counter there or is there any better way to achieve this?

Here is The Demo

$(function() { $("#slider").slider({ range: "max", min: 300, max: 1000, value: 1, slide: function(event, ui) { $(".inner").css({ "width": ui.value, "height": ui.value }); } }); });