Appending <div> to jQuery slider handle

Question

Is there any way I can append a div to the slider handle, so I can control the handle by dragging that div? Please see the picture attached.

Thank you.

Answer 1

Yes, you can attach a <div> to the handle and use that <div> to control the slider. The drag events work just as well on the handle's children as on the handle itself; so, you can just give the handle an appropriately absolutely positioned child, something like this:

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

and some 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;
}

Demo: http://jsfiddle.net/ambiguous/9B4MC/