How to attach (position) a div to jQuery UI Slider handler

I am working on the snippet below. Why am I not able to attach the .box to ui handler?

$("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    create: function() {
        $('.box').appendTo($('#slider a').get(0));

    },
    slide: function(event, ui) { $(ui.handle).find('span').html( ui.value); }
});

// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, 10"
});

body{
  padding:60px;
  }

#slider 
{
    width: 80%;
    margin-left: 1em;
}

#slider a {
    text-decoration: none;
    outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
    text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:12px 12px;
}

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

<div id="slider"></div>
<span class="box"></span>

Solution

The element .box is currently attached to the <body>. If you want to position it, you only need to use .position() properly.

Exmaple:

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".box").html(ui.value).position({
        my: "center top",
        at: "center bottom+10",
        of: $(".ui-slider-handle", this)
      });
    }
  });

  // only initially needed
  $('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom+10',
    of: $("#slider .ui-slider-handle")
  });
});

body {
  padding: 60px;
}

#slider {
  width: 80%;
  margin-left: 1em;
}

#slider a {
  text-decoration: none;
  outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 12px 12px;
}

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

<div id="slider"></div>
<span class="box"></span>

Update

If you want the handle to be the box, try this.

HTML

<div id="slider"></div>

CSS

.ui-slider span.ui-slider-handle {
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  padding: 12px 12px;
}

JavaScript

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".ui-slider-handle", this).html(ui.value);
    }
  });
  $("#slider .ui-slider-handle").html($("#slider").slider("value"));
});