jquery ui slider with two handles returns wrong index of handle

Question

I am using the jquery-ui slider with 2 handles. But when I move the right handle on top of the left handle and after that, grab the top handle, the bottom one is selected.

This error also occur when I move one handle in the vertical axis.

 $('#slider').slider({
  min: 0.0,
  max: 10,
  step: 0.1,
  values: [5, 5],
});

css

#slider .ui-state-default:nth-of-type(1) {
  border: solid 2px red;
  top:25px;
}

#slider .ui-state-default:nth-of-type(2) {
  border: solid 2px blue;
}

See this fiddle

Why is jquery-ui returning the wrong index? How can I fix this problem?