Ionic-framework: ion-range (end/release) event

[PAFsec]

Hello,

I was wondering if you were considering adding an end/release output event to your ion-range directive in order to trigger the end of the interaction with the range ?

I think it could be useful !

Thank you in advance

[biesbjerg]

That would be very useful!

At the moment I'm relying on custom debounce code (for an audio player seekbar), which is not optimal, but better than nothing.

[ghenry22]

I also have custom debounce for the range slider but I believe that debounce is actually implemented as an option now, just haven't gone back over it yet.

[biesbjerg]

@ghenry22 You are right about debounce is implemented as an option.

I'm using custom debounce code because I wanted to disable updates to the slider (from external events, in this case audio player time updates) while dragging the knob. ionDragStart and ionDragEnd output events would be very useful.

[biesbjerg]

Something like this should do it:

diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 0b013ec..3d8e06b 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -303,7 +303,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }

   /**
-   * @input {number} If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`.
+   * @input {boolean} If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`.
    */
   @Input()
   get pin(): boolean {
@@ -341,6 +341,8 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
    */
   @Output() ionChange: EventEmitter<Range> = new EventEmitter<Range>();

+  @Output() ionDragStart: EventEmitter<Range> = new EventEmitter<Range>();
+  @Output() ionDragEnd: EventEmitter<Range> = new EventEmitter<Range>();

   constructor(
     private _form: Form,
@@ -431,6 +433,8 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
     // figure out which knob we're interacting with
     this.setActiveKnob(this._start, rect);

+    this.ionDragStart.emit(this);
+
     // update the ratio for the active knob
     this.updateKnob(this._start, rect);

@@ -471,6 +475,8 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
     ev.preventDefault();
     ev.stopPropagation();

+    this.ionDragEnd.emit(this);
+
     // update the ratio for the active knob
     this.updateKnob(pointerCoord(ev), this._rect);

[biesbjerg]

Since ionic is in feature freeze until final release, this probably won't be added for a while.

If anyone needs a workaround right now, you can do the following:

import { Component, OnInit, ViewChild } from '@angular/core';

import { Range } from 'ionic-angular';
...
export class PlayerSeekbarComponent implements OnInit {

    // Grab a reference to range (add #range to html tag)
    @ViewChild('range') public range: Range;

    public ngOnInit(): void {
        const originalPointerDown = this.range.pointerDown;
        this.range.pointerDown = (ev: UIEvent): boolean => {
            const result = originalPointerDown.call(this.range, ev);
            if (!result) {
                return result;
            }
            console.log('DRAG START');
            return result;
        }

        const originalPointerUp = this.range.pointerUp;
        this.range.pointerUp = (ev: UIEvent): void => {
            originalPointerUp.call(this.range, ev);
            console.log('DRAG END');
        }
    }

...

[PAFsec]

Hi biesbjerg !

That is exactly the patch I did with my ionic local version. Would you like me to create a pull request or are you doing it.

Regards

[manucorporat]

@biesbjerg you are right! we are feature frozen until final release. We are focusing in getting what we have right, UX issues, important bug fixes and performance.

But please, feel free to submit a PR. I like the idea a lot!

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#176

[jhwhitle]

Hi Justin,

Just wondering if there's been any progress with this.

I'm having a problem with ionic beta 3 firing ionChange events for all my ion-range components when I use tab navigation. Adding an end/release event would probably fix that.

Thanks!

@jgw96

[cocowalla]

@jgoux the link you said this was moved to is a 404?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.