jquery - 追記中jQueryスライダーハンドルへ

Question

スライダー ハンドルに div を追加して、その div をドラッグしてハンドルを制御できる方法はありますか? 添付の写真をご覧ください。

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

Answer 1

<div>はい、ハンドルに を取り付けて、それを使用し<div>てスライダーを制御できます。ドラッグ イベントは、ハンドル自体と同様に、ハンドルの子に対しても機能します。そのため、次のように、適切に絶対配置された子をハンドルに与えることができます。

// The actual selector would be a little more specific.
$('.ui-slider-handle').append('<span class="sidecar"></span>');

およびいくつかの CSS:

/* The dimensions, position, ... are just examples, absolute positioning is the key. */
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;
}

デモ: http://jsfiddle.net/ambiguous/9B4MC/