Как расставить приоритеты дескриптора слайдера jQuery?

У меня есть два ползунка с добавленным к ним <span>. Это означает, что ползунки также могут управляться прикрепленным диапазоном.

Код указан:

//jquery code
$('#slider').slider({

   values: [0, 0]


   var handle1 = $('#slider  a.ui-slider-handle, ui-state-default, ui-corner-all').first();
   handle1.append('<span class="sidecar"></span>');

   var handle2 = handle1.next();
   handle2.append('<span class="sidecar2"></span>');
}


//css code
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;

}

.sidecar2 {
    position: absolute;
    top: 80px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #000000;

}

Когда они находятся друг над другом (например, в (0,0)), даже если я пытаюсь перетащить ручку, прикрепленную к <span> '.sidecar2' (черный), он всегда перемещает ползунок с прикрепленным к нему красным <span> . Причина этого в том, что это первый дескриптор в коде между двумя.

Я пробовал все, что мог, чтобы исправить это. Например. Пытался вручную добавить классы ui-state-active ui-state-focus во второй (ЧЕРНЫЙ) ползунок, пытался изменить z-index, но ни один из них не работает. :(

Любая помощь будет оценена по достоинству.

Спасибо.

Редактировать: единственное решение, которое я смог найти, приведено здесь: я создал 2 ползунка друг над другом с одной ручкой в ​​каждом. Он работает идеально.