如何确定 jQuery 滑块句柄的优先级？

Question

我有两个滑块手柄，并附加了 。这意味着滑块也可以通过附加的跨度进行控制。

代码如下：

//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) 处），即使我尝试拖动 '.sidecar2'（黑色），它总是移动带有红色 的滑块。其背后的原因是，它是代码中的第一个句柄，位于两个句柄之间。

我已尽一切努力来修复它。例如，尝试手动将类 ui-state-active ui-state-focus 添加到第二个（黑色）滑块，尝试更改 z-index，但它们都不起作用。 :(

如有任何帮助，我们将不胜感激。

谢谢。

编辑： 我能找到的唯一解决方案在这里给出： 我创建了 2 个滑块，每个滑块都有一个手柄。它工作完美。

Answer 1

我能找到的唯一解决方案在这里给出：
我创建了 2 个滑块，每个滑块都有一个手柄。它工作完美。