How to Add Custom Increment and decrements Counter in jQuery Ui Slider

Question

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?

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

});

body,
html {
  height: 100%;
  width: 100%
}

.wrapper {
  position: relative;
  height: 300px;
  width: 300px;
  border: 2px solid #999;
  border-radius: 4px;
  overflow:hidden;
}

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper ">
  <div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>

Answer 1

Since the width of the div and the range of the slider were the same, I used the slider value to change the left and top positions of the inner div. This was of course possible because it was in position absolute.

Only half the value of the slider is applied, because to be centered you should split the change on left/right and top/bottom. Obviously adding the right or bottom css property would be pointless, since one is enough to properly position your element.

$(function() {
  var $inner = $(".inner");
  var lastValue = 300;
  $("#slider").slider({
    range: "max",
    min: 300,
    max: 1000,
    value: 300,
    slide: function(event, ui) {
      var curLeft = $inner.position().left;
      var curTop = $inner.position().top;
      var toAdd = (lastValue - ui.value) /2;

      $inner.css({
        "width": ui.value,
        "height": ui.value,
        "top": curTop + toAdd,
        "left": curLeft + toAdd,
      });
      
      lastValue = ui.value;
     }
  });

});

body,
html {
  height: 100%;
  width: 100%
}

.wrapper {
  position: relative;
  height: 300px;
  width: 300px;
  border: 2px solid #999;
  border-radius: 4px;
  overflow:hidden;
}

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper ">
  <div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>