1

我有两个<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 个相互重叠的滑块，每个滑块都有一个手柄。它工作完美。

4

1 回答 1

1

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

于 2012-01-19T10:57:34.063 回答