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

【问题标题】：How to get the value of a jquery slider to follow the handle, but not all the way?如何让 jquery 滑块的值跟随句柄，但不是一路？
【发布时间】：2011-05-17 07:40:48
【问题描述】：

我有一个 jQuery 滑块，它应该放置在页面的窄列中。这个想法是该值应该在滑块下方以工具提示的方式跟随手柄。通过在 jquery 滑块滑动事件中使用“事件对象”的 pageX 属性，我已经让它工作得很好。

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

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

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

关于如何让我的价值巧妙地跟随手柄的任何建议。但在某种程度上它不会“掉出来”？

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

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

【问题讨论】：

你能创建一个 jsFiddle 或发布一个测试用例 URL 吗？

标签： jquery jquery-ui slider

【解决方案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);

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

【讨论】：

【解决方案2】：

首先缓存你的 $ 对象。

$element = $(element);

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

【讨论】：