如何优先处理jQuery滑块手柄？

Question

我有两个附加<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添加到第二个（BLACK）滑块，尝试更改z-index，但它们都没有工作。 ：（

任何帮助都将不胜感激。

谢谢。

修改 我能找到的唯一解决方案是： 我在彼此的顶部创建了2个滑块，每个滑块各有一个手柄。它很完美。

Answer 1

我能找到的唯一解决方案是： 我在彼此的顶部创建了2个滑块，每个滑块各有一个手柄。它很完美。