如何让jquery滑块的值跟随句柄，但不是一直跟随？

我有一个jQuery滑块，应该放在页面上的窄列中。其思想是，该值应以类似于工具提示的方式跟随滑块下方的控制柄。通过在jqueryslider事件中使用“event object”的pageX属性，我已经很好地实现了这一点

$(element).css("left", event.pageX - ($(element).width() / 2)).text(ui.value);

但问题是，由于列非常窄，所以当我将滑块拖动到最大值时，显示的值将放置在列的外部。或者它的一部分无论如何都会

我提出的解决方案是要么缩短滑块。但我的设计师可能会抱怨。另一个解决方案是确保我显示的值的运动范围比滑块窄。但我不知道如何做到这一点

任何关于我如何获得我的价值的建议都要严格遵守规则。但在某种程度上它不会“掉出来”

编辑： 下面是一个jsFiddle，它解释了我今天的情况。底部跟随的值结束于列的宽度之外。我用一个蓝色的盒子表示

---

首先缓存$object

$element=$（element）

然后，不要使用event.pageX属性，而是使用
$element.position（）.left
。请记住，这是相对于父相对元素的。因此，您可能希望使用
$element.offset（）。在计算位置时，您可以轻松强制限制：

// Caching jQuery objects
var $element = $(element).text(ui.value);
var $container = $element.parent();

// Calculating new position
var newpos = event.pageX - $element.width() / 2;
newpos = Math.max(newpos, 0);
newpos = Math.min(newpos, $container.innerWidth() - $element.outerWidth());

$element.css('left', newpos);

为了便于阅读，计算被分解了。上面的代码假设主列容器是元素的父元素。
您可以创建一个JSFIDLE或发布一个测试用例URL吗？