How to prioritize jQuery slider handle?

Question

I have two slider handles with <span> appended to them. Meaning sliders can be controlled by attached span as well.

The code is as given:

//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;

}

When they are on top of each other(e.g. at (0,0)), even if I try to drag the handle attached with the <span> '.sidecar2' (black one), it always moves the slider with red <span> attached to it. The reason behind that is, it is the first handle in the code, between two.

I have tried everything I could, to fix it. E.g. Tried to manually add classes ui-state-active ui-state-focus to the second(BLACK) slider, tried to change z-index, but none of them are working. :(

Any help would be appreciated.

Thank you.

Edit: The only solution I could find is given here: I have created 2 sliders on top of each other with one handle in each. It works perfect.

Answer 1

The only solution I could find is given here: I have created 2 sliders on top of each other with one handle in each. It works perfect.