Слайдеры jQuery UI при нажатии

Question

Я использую Ползунок JQuery UI , чтобы создать два различных эффекта слайда, один горизонтальный и другой вертикальный .

Но есть уникальная проблема с ними обоими, которая беспокоит меня и моего клиента, и я, кажется, не могу найти решение. Это головная боль и облом после всей работы, которой я занимался, но в этих модулях.

Я уверен, что я не единственный, кто сталкивается с этой проблемой, но, похоже, я не нашел решений, которые бы подходили моей проблеме в Интернете

Вы можете увидеть оба модуля здесь

http://bit.ly/dVLPfc

http://bit.ly/g5rflP

Ползунок, который сам использует процент для своей позиции "left: 0%", если вы нажмете на ползунок, он прыгнет примерно на 5-7%. Так что это кажется немного нестабильным. Я хочу, чтобы ползунок использовал процентное значение, на которое он установлен, когда я щелкаю по нему, и затем изменяю только при перемещении мыши. Я пытался вставить позицию в значение и добавить его, когда я нажимаю на ползунок, но плагин пользовательского интерфейса перезаписывает его.

Ползунок не всегда следует за скоростью курсора, в вертикальной версии вы можете видеть, что он перемещается из точки курсора при некоторых обстоятельствах.

Дайте мне знать, что вы думаете, надеюсь, вы поможете мне встать на правильный путь.

Answer 1

Поля маркера вашего слайдера кажутся неправильными по размеру ваших пользовательских слайдеров.

Ваше левое или верхнее поле должно быть вдвое меньше длины или высоты ручки прокрутки.

Для вашего первого модуля, поскольку длина вашей горизонтальной ручки ползунка составляет 60 пикселей, вам нужно изменить ручку ползунка margin-left на -30 пикселей в dagskra.css.

#dagskra .slider div a {
    background: url("../images/dagskra/slider/slider.png") no-repeat scroll right center transparent;
    cursor: default;
    display: block;
    height: 28px;
    margin-left: -30px;
    position: absolute;
    top: -0.5em;
    width: 60px;
    z-index: 2;
}

Для вашего второго модуля, поскольку высота вертикальной ручки ползунка составляет 50 пикселей, вам необходимо изменить ручку ползунка margin-top на -25 пикселей в dagatal.css.

.ui-slider-handle {
    background: url("../images/dagatal/scroll/slider.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 2px;
    margin-top: -25px;
    position: absolute;
    right: -4px;
    width: 16px;
    z-index: 20;
}