darul75 / angular-awesome-slider

:arrows_clockwise: Angular slider control directive
http://darul75.github.io/angular-awesome-slider/
MIT License
143 stars 63 forks source link

bind to touch AND non touch events #119

Open dangnelson opened 8 years ago

dangnelson commented 8 years ago

Can you give me an example for how I might bind to an event in a controller? I'm lost trying to figure it out.

dangnelson commented 8 years ago

Tried just doing this instead, but it's buggy.

 $('.jslider').bind('click mousedown mouseup', function() {});
darul75 commented 8 years ago

Hi,

Juste to be sure, first, did you notice I have removed jQuery dependency, so you need to include it yourself..but I guess you did.

Then I have made some tests with your code which looks good.

I have tried both angular jqlite or jquery and it was fine.

https://docs.angularjs.org/api/ng/function/angular.element

make sure slider's dom structure is injected into DOM before calling your code ?

or share with me more about code around,

kindly,

julien

dangnelson commented 8 years ago

The issue with the code I have is that if you're dragging the slider and move your mouse outside of the jslider area, it's no longer bound. Here's a full working example:

http://jsfiddle.net/g9e9n8xc/311/

    $(function () {

            $('.jslider').bind('click mousedown mouseup mouseover', function() {
                var currentvalue = (parseInt($('.jslider-value').css('left'))*100)/(parseInt($('.jslider').css('width'))).toFixed();

                //console.log(currentvalue.toFixed());

                if (currentvalue.toFixed() <= 51){

                    $('.jslider-value').css('backgroundColor','#DA473B')

                }else if(currentvalue.toFixed() > 51){
                    $('.jslider-value').css('backgroundColor','#18A689')
                }
            })
    });

If you hover back over the slider the color will change, but not until then.

I noticed with your last commit you added binding events, so I thought maybe there was a more supported way of doing this.

darul75 commented 8 years ago

Which version do you use ?

2015-07-21 15:39 GMT+02:00 Dan G Nelson notifications@github.com:

last

dangnelson commented 8 years ago

2.3.8

darul75 commented 8 years ago

I try to understand the case, if I move outside come back, move outside, come back... your binding event listener code is still executed here.

dangnelson commented 8 years ago

If you start a drag on the left, move your mouse down, out of the container, then to the right, the action will not occur.

darul75 commented 8 years ago

do you reproduce it with this fiddle ?

http://jsfiddle.net/darul75/kynzxxuq/

dangnelson commented 8 years ago

Yes. Click the dragger. Move your mouse down out of the div while holding down. Move the slider over, the color won't change.

If you hover over the div afterwards, it will change.

I need a way to bind to interactions with the slider. So on stop or start of the interaction I can trigger an action.