Ion-range capturing the event at the END of a drag only, not at each step through the drag of the range input slide

Hello,

I need to know when an <ion-range> has finished - i.e. when the user stopped dragging the range slider around. I do not want a million callback calls via onChange() because my user experience needs an action only at the end of a drag - I suspect many many UX uses of <ion-range> would need this end event too. But by default <ion-range> does not fire an “end” event.

No, debounce does not solve this. It is not possible to accomplish a true “end” event via playing around with debounce.

As opposed to the “change” event, this would be a “last change” event.

Such an “end” event can possibly be captured via adding a (touchend) event to <ion-range>.

I’d like to know how to proceed to get this functionality. I can think of three options. I’d really appreciate any input as to which option (or a new one) is best:

  1. if there is a plan to add an “end” event to <ion-range> - I may just wait and I’m willing to work on it, it’s a very simple small change

  2. I can extend the Range class - but it seems like a messy thing to do (you have to call super(form, item, renderer) which i’m not sure how to do and then i don’t know how to add the (touchend) event to the extended class

  3. I can create a new directive whose HTML template wraps an <ion-range> and add to it the (touchend) event.

Thanks very much!
-Doron

I think a pull request or opening an issue requesting the feature would be the best thing to do. I needed a touchend event as well but settled for a debounced ionChange for now.

Thanks! I ended up going with option (4): implementing a new directive from scratch that mimics <ion-range> except that (a) it returns floating point values (between 0.0 and 1.0 only); (b) it handles all the mouseup / touchend events. The trick was to initiate a mouse-up event listener on the entire html body after a mousedown event on just the slider, so that we can catch the mouseup anywhere the mouse (or the finger) is released. Seems to work fine. The code for this directive is here (called it <progress-slider> because it’s like a progress bar but one you can slide around and change the progress value for):

https://github.com/tracktunes/ionic-recorder/tree/master/app/directives/progress-slider

here’s an example use - template of another directive that uses the <progress-slider> directive:

NOTE: the above code is still alpha. It’s only been tested in Ubuntu 14.04 in the Chromium browser via ionic serve, Ionic2 Beta.10. It’s not yet clear if the (touchend) event needs to be handled at all - currently it does nothing in the code and all works fine in the browser with mouseup - need to test on a mobile browser…

I allow myself to bring that post up again. Except the solution of @doron which consist of creating his own range component, anyone have a solution to catch the end/oncomplete/mouseup/or anything else event of an ion-range?

1 Like

This one worked for me (at least in chrome):

<ion-range min="0" max="100" [(ngModel)]="percent" (ionChange)="onSliderChanged()" (mouseup)="onSliderReleased()">
</ion-range>
3 Likes

Instead of mouseup I prefer debounce

<ion-range min="0" max="100" [(ngModel)]="percent" debounce="500" (ionChange)="onSliderChanged()"> </ion-range>

by set that to 500ms, It’s good enough to get final value from range.

5 Likes

Thank you worked like a charm

3 Likes

So that someone got a solution if they find this thread - I had same problem and had to use (ionBlur):

<ion-range (ionBlur)=“doSmth()”>

3 Likes

Agree with @aledra - thanks! - I switched from writing an entire component for this purpose (the links above in my previous post here no longer work as a result) to just using (mouseup).

NOTE: this will only work on desktop browsers, if you wish to intercept the “same” event when your app runs in mobile browser, you should use (touchend). In Chrome, those two events do not fire together, so you can safely have both events listened to and the event handler function will only be called once, e.g, from tested code I’m running:

    <ion-range [(ngModel)]="progressValue"
               (mouseup)="onProgressChangeEnd($event)"
               (touchend)="onProgressChangeEnd($event)"></ion-range>
2 Likes