jQueryスライダのハンドルに優先順位を付ける方法は？

Question

私には、<span>が付いた2つのスライダハンドルがあります。意味のスライダは、スパンによっても制御できます。与えられたとして

コードは次のとおりです。

//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>が取り付けられた状態で移動します。その背後にあるのは、2つのコードの間の最初のハンドルです。

私はそれを修正するためにできることすべてを試しました。例えば。手動でクラスui-state-active ui-state-focusを2番目の（BLACK）スライダに追加しようとしましたが、Z-インデックスを変更しようとしましたが、いずれも機能していません。 :(

任意の助けいただければ幸い

ありがとう

編集：。。 私は見つけることができる唯一の解決策はここに与えられます。 私は互いの上に2つのスライダを作成しました

Answer 1

私が見つけられる唯一の解決策はここにあります： 私はお互いの上に2つのスライダーを作成して、それぞれに1つのハンドルを持っています。完璧に動作します。