如何获取 jquery 滑块的值以跟随句柄，但不是一路

Question

我有一个jQuery滑块，应该放在页面上的狭窄列中。这个想法是，值应该跟随工具提示中的手柄，就像滑块下方的时尚一样。通过在 jquery 滑块幻灯片事件中使用"事件对象"的 pageX 属性，我已经很好地工作了。

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

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

我想出的解决方案是缩短滑块。但我的设计师可能会抱怨。另一种解决方案是确保我显示的值的移动范围比滑块窄。但我不确定如何做到这一点。

关于如何让我的价值整齐地遵循手柄的任何建议。但以一种不会"掉出来"的方式？

编辑：这是一个jsFiddle，解释了我今天的情况。跟随底部的值最终超出列的宽度。我用一个蓝色的盒子来表示。

http://jsfiddle.net/nuPYa/2/

Answer 1

计算仓位时，您可以轻松强制限制：

// 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);

为了便于阅读，计算被分解了。上面的代码假定主列容器是元素的父级。

Answer 2

首先缓存你的 $ 对象。

$element = $(element);

然后，不要使用 event.pageX 属性，而是使用 $element.position().left 。请记住，这是相对于父相对元素的。所以你可能想使用$element.offset().left