1

2つのスライダーハンドルが<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;

}

ここに画像の説明を入力してください

<span>それらが重なり合っている場合（たとえば（0,0））、 「。sidecar2」（黒いもの）が付いているハンドルをドラッグしようとしても、常に赤い<span>が付いているスライダーが移動します。その背後にある理由は、2つの間のコードの最初のハンドルであるということです。

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

どんな助けでもいただければ幸いです。

ありがとうございました。

編集： 私が見つけることができる唯一の解決策はここにあります：私はそれぞれに1つのハンドルを持つ2つのスライダーを互いに重ねて作成しました。それは完璧に動作します。

4

1 に答える 1

1

私が見つけた唯一の解決策はここにあります。それぞれに 1 つのハンドルを持つ 2 つのスライダーを重ねて作成しました。それは完璧に機能します。

于 2012-01-19T10:57:34.063 に答える