У меня есть две ручки ползунка с добавлением <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, но ни один из них не работает. (
Буду признателен за любую помощь.
Спасибо.
Edit:
Единственное решение, которое я смог найти, дано здесь:
Я создал 2 ползунка друг над другом с одной ручкой в каждом. Работает отлично.