Как получить значение ползунка JQuery, чтобы следовать за дескриптором, но не полностью?

Question

У меня есть слайдер jQuery, который должен быть размещен в узком столбце на странице. Идея состоит в том, что значение должно следовать за дескриптором в виде всплывающей подсказки под ползунком. Я получил это, чтобы работать довольно хорошо, используя атрибут pageX «объекта события» в слайд-событии слайдера jquery.

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

Но проблема в том, что из-за того, что столбец довольно узкий, поэтому при перетаскивании ползунка до максимума отображаемое значение будет помещено за пределы столбца. Или все равно часть этого будет.

Решение, которое я придумал, это сделать слайдер короче. Но мой дизайнер, вероятно, будет жаловаться. Другое решение - убедиться, что отображаемое значение имеет более узкое поле движения, чем ползунок. Но я не уверен, как этого добиться.

Любые предложения о том, как я могу получить свою ценность, чтобы аккуратно следовать за ручкой. Но так, чтобы это не "выпало"?

EDIT: Вот 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