Javascript 将文本与滑块对齐

我有一个这样的桌子结构

<tr>
    <td>
      Text to move
    </td>
</tr>
<tr>
    <td>
       <div>jQuery slider container is in here<a>slider pointer is in here</a></div>
    </td>
</tr>

要移动的文本
jQuery滑块容器在这里滑块指针在这里

当滑块移动时，我看到链接元素的样式会更新一个百分比，表示它向右的距离，例如：

style=“left:11.7647%；”

我希望“text to move”与滑块对齐，并按该百分比移动。我有什么办法可以做到这一点吗？如有必要，我可以添加更多的div/span等

---

注意：我知道如何获取滑块移动的百分比，问题只是将其对齐。

既然您已经知道百分比，您可以将文本设置为具有相同百分比的左边距：

$("#hoverText").css("margin-left", percent + "%");

以下是我的工作测试代码：

HTML

<table id="layoutTable" style="width:100%;">
  <tr>
    <td>Percent: <span id="percent"></span></td>
  </tr>
  <tr>
    <td style="width:100%;"><span id="hoverText">Here's Some Text</span></td>
  </tr>
  <tr>
    <td style="width:100%;"><div id="slider"></div></td>
  </tr>
</table>

$(document).ready(function(){
  $("#slider").slider({
    "slide": function(event, ui) {
      var percent = ui.value;
      $("#percent").html(percent);
      $("#hoverText").css("margin-left", percent + "%");
    }
  });
});