Appending
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.

enter image description here

Thank you.

http://stackoverflow.com/questions/3147387/tooltip-to-follow-jquery-slider-handle — Aram Mkrtchyan, Jan 17 '12 at 05:41
Thanks for the reply... But it is div made up of separate divs. Unfortunately, It can't be replaced with tooltip. — user1101382, Jan 17 '12 at 05:55

score 4 · Accepted Answer · answered Jan 17 '12 at 06:27

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/

Appending to jQuery slider handle

1 Answers1

Appending
to jQuery slider handle