Положение финишной рукоятки слайдера jquery-ui осталось на 100% - размещение вне слайдера

Question

Я впервые использую слайдер jQuery-ui, и меня смущает довольно простая проблема.При настройке слайдера я хочу сделать это без использования темы.Когда я двигаюсь слева направо, правое положение ручки ползунка с шагом 1 пересекает ширину ползунка.Это связано с тем, что ползунок css позиционирует ручку слева: 100%.Я отмечаю, что многие другие люди используют слайдер без каких-либо затруднений, но не могут понять, как они справляются с этой проблемой.
Демонстрация проблемы
Я предполагаю, что упускаю что-то смущающее базовое ихотел бы знать, что.
большое спасибо

Answer 1

Прочитав немного больше об этом, кажется, что ползунок предназначен для работы описанным способом, но со смещением ручки влево на 50% от его ширины. Таким образом, центр бара обозначает значение - что имеет смысл (когда ползунок обозначает значение).
Чтобы использовать ползунок в качестве полосы прокрутки, просто оберните ползунок в div, который дополняется слева и справа на 50% ширины ползунка. Я обновил мое демо , чтобы отразить это.
Если у кого-то есть лучшее решение, без необходимости дополнительного div, я бы хотел его увидеть.

Answer 2

Я считаю, что свойство css "translate" - лучший вариант здесь ...

.ui-slider-horizontal .ui-slider-handle {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
}

Настройте значение пикселя перевода в соответствии с вашими потребностями:)

Answer 3

Это также помогает гарантировать, что значения, передаваемые ползунку, являются целочисленными. У меня были некоторые проблемы с указателем ползунка, находящимся не в том месте, но когда я принудительно заставил значение быть целочисленным с parseInt () примерно так:

значение: parseInt (whatValue)

все работало нормально.

Answer 4

Установить левое поле или минус половину ширины ручки

Answer 5

Я проверил ваше демо. Вам не хватает некоторых CSS-файлов. ВЫ также загружали файлы css с сайта jquery ui? Например, ui-widget-content - это CSS, который определяет ширину ползунка и его отсутствие в вашем ползунке. Получите CSS и свяжите его со своей страницей, и все будет в порядке.