search

Venturocket / angular-slider

Slider directive for AngularJS.
MIT License
262 stars 121 forks source link

Dual Knobs Stick Together #23

Open James-Dunn opened 10 years ago

James-Dunn commented 10 years ago

When you overlap the knobs, release, then click it again to move it, it moves both knobs together.

http://jsbin.com/nacoluta/1/edit

drgould commented 10 years ago

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 commented 10 years ago

@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 commented 9 years ago

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 commented 9 years ago

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.