提交后更改div宽度/高度的JQuery滑块保存值

Question

我想用滑块调整div的宽度和高度。单击提交按钮后，我希望将div的宽度和高度调整为我将滑块设置为的值。到目前为止我所做的是div调整，当我来回滑动时，但是一旦我点击提交，它就会重置为正常，而不是显示与剩下的相同的大小。

<script>
  $(function() {
    $("#slider").slider({
      value:parseInt($("input[name='slider_id']").val(), 10), min: 10, max: 400, step: 10, slide: function(event, ui) {
        $("#amount").val(ui.value);
        $('.ad_display').css('width', (ui.value+50) + 'px');
        $('.ad_display').css('height', (ui.value+50) + 'px');
      }
    });
    $("#amount").val($("#slider").slider("value"));
  });
</script>

滑块：

<input type="text" id="amount" class="slider_size" name="slider_id" value="<?php echo $ad_size; ?>"> %<br><div id="slider"></div>

如何将值设为宽度和高度？

我尝试使用带有isset（$ _ GET ['slider_id']）的php获取值，但这不起作用

  echo  '<div class="ad_display" id="'.$date.'" style="width:'.$ad_size.'+50px;height:'.$ad_size.'+50px;">blabla</div>'

非常感谢任何帮助！