If the handles of the slider is modified to not fully overlap you still can't drag the second handle even if you click it directly.

STR:

1. Load ​http://jsfiddle.net/TXudh/4/
2. Hover the red handle and notice that is becomes green.
3. Try to drag the red(now green) handle without moving the blue one.

Expected result: The red handle should be movable if it's clicked directly.

Actual result: Even if you click the red handle directly while on the same value as the blue the blue handle will be dragged.

I am using the following code to select a date range using 2 inline datepickers. There are two date fields (div, with class dateheader). When a date is selected, that datepicker slides up. Basically when the date div is clicked, first it is checked whether the corresponding datepicker is already viewable (through the fromclicked and toclicked variables), if present, then slide it up, else slide it down, changing the corresponding clicked attribute accordingly, and before doing either, sliding the other datepicker up and setting its corresponding clicked attribute to 0. Now there is a text input at the bottom of the code. When it is excluded, the code works fine, as expected. However if it is included, the code breaks, i.e if you click one date div, then select a date from the datepicker, it will slide up correctly. Then if you click the other date div, the datepicker will slide down alright, but selecting a date won't slide it up. I am at my wit's end. Where is the bug? The complete code is at ​http://jsfiddle.net/Cupidvogel/2ppYb/ (I couldn't include the UI-CSS files like the UI darkness theme file and related images, but even the unstyled version is enough!).

I am working with the dialog and I have position's offset working in all browsers but IE6 & 7. IE8 works fine, but 6 & 7 both don't work with a negative value.