CODEWITHSUNDEEP
jqueryjquery-uijquery-slider
user1101382
user1101382

Reputation: 157

Appending <div> to jQuery slider handle

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.

Upvotes: 3

Views: 1348

Answers (1)

mu is too short
mu is too short

Reputation: 434615

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/

Upvotes: 4

Related Questions