Добавление <div>к дескриптору слайдера jQuery

Question

Можно ли как-нибудь добавить элемент div к ручке ползунка, чтобы я мог управлять маркером, перетаскивая этот элемент div?Пожалуйста, смотрите прикрепленное изображение.

Спасибо.

Answer 1

Да, вы можете прикрепить <div> к ручке и использовать это <div> для управления ползунком.События перетаскивания работают так же хорошо на дочерних элементах дескриптора, как и на самом дескрипторе;Итак, вы можете просто дать дескриптору правильно позиционированный дочерний элемент, что-то вроде этого:

// The actual selector would be a little more specific.
$('.ui-slider-handle').append('<span class="sidecar"></span>');

и немного CSS:

/* The dimensions, position, ... are just examples, absolute positioning is the key. */
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;
}

Демо: http://jsfiddle.net/ambiguous/9B4MC/