Skip to content

bug: ion-range emit value 'NaN' when dragging to the far left end of the screen when the browser is full screen #29792

Closed
@dodo-Riley

Description

@dodo-Riley

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

Peek 2024-08-23 14-31.webm
Please refer to the attached video.

In event handlers such as ionInput or ionKnobMoveEnd on an ion-range, it can happen that the event.detail.value is NaN.
When specifying currentX in the onEnd function inside range.js, detail.currentX can be 0.
But, If it is 0, it tries to assign clientX to currentX by || even though it is a GestureDetail. However, in this case, clientX is undefined, which causes a NaN to occur later.

The problematic part of the code is attached as the image below.
image (18)
The bug can be fixed if it is modified to pass 0 when detail.currentX is 0.

Expected Behavior

When detail.currentX is 0, the value should be passed as is.

Steps to Reproduce

  1. clone reproduction code.
  2. start project
  3. set browser to full screen
  4. drag knob to the far left end of the screen

Code Reproduction URL

https://github.com/dodo-Riley/ionic-range-test

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/toonsquare/.nvm/versions/node/v18.18.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.8.6
@angular-devkit/build-angular : 15.2.11
@angular-devkit/schematics : 15.2.11
@angular/cli : 15.2.11
@ionic/angular-toolkit : 11.0.1

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v18.18.1 (/home/toonsquare/.nvm/versions/node/v18.18.1/bin/node)
npm : 9.8.1
OS : Linux 6.5

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions