Dual Knobs Stick Together

[venturocket]

Dual Knobs Stick Together

[drgould]

This is expected behavior. When the knobs overlap, because the slider is unaware of the UI, it can only guess which knob the user intends to move (telekinesis is coming in a future update ;) ). The only reliable thing to do is move them both. It could be more granular about checking the exact pixel where the click starts but I feel that might lead to some bad UX.

In the case of your linked demo, the inactive image you're using for the knobs has a bunch of padding which causes it to not look overlapped to the user, but in the DOM they actually are. Using active and inactive images that are the same width should help with that. Another option would be to set a buffer so the knobs don't overlap.

I'll leave this open for more feedback but for now I'm leaving it as is.

[borgateo]

@drgould That example works quite alright, but if I try to use the last version of angular-slider.js, there are some issues with the knobs. They don't move properly.

(ofc I changed ng-model-low to ng-model and ng-model-high to ng-model-range)

[Vitenok]

A little hack which can help here.
When both knobs are overlapped, if user is trying to select one knob the value of ref variable in onMove function is 'selectBar', So I added this piece of code (pseudocode):

onMove(){
......
if(isDualKnob) {
// dual knob slider
if (ref === 'selectBar' ){
ref = 'ngModelHigh';
}
......
}
}
So when selection is undefined right knob will be returned.
Quite primitive, but works.
P.S. I also used older version of angular-slider.js, due to its' better performance.

[trygveaa]

The problem with moving both sliders is that it makes it impossible to separate them, as far as I can see. So if you move them so they overlap, you are unable to move them where you want afterwards. How is a user supposed to solve this?

If you only move one of them, this is not a problem. Even if you move the one the user didn't intend to move, he will still be able to move them to the intended locations since they now are separated.