Ionic-framework: bug: ion-range event value is always type RangeValue {lower, upper}.

[Domvel]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
The type of the ion-range value is always RangeValue ({ lower: number; upper: number; }).

Type 'RangeValue' is not assignable to type 'number'.
  Type '{ lower: number; upper: number; }' is not assignable to type 'number'.ts(2322)

Expected behavior:
But by the docs it should be number OR RangeValue (number | { lower: number; upper: number; })

Steps to reproduce:
Create a ion-range and append ionChange event. Please see related code...

Related code:

html

<ion-range
  (ionChange)="onRangeChange($event)"
  [min]="min"
  [max]="max"
  debounce="500"
></ion-range>

ts (error visible, see Current behavior section.)

onRangeChange(event: IonRange) {
  this.value = event.value;
}

Other information:
Workaround: Cast to number. But maybe it's unsafe.

I think it's just a type definition issue.

Ionic info:

Ionic CLI :     5.2.8
Ionic Angular : 4.9.1
NodeJS :        v10.15.3
npm :           6.4.1
OS :            Windows 10
VSCode :        1.38.1

[JumBay]

I can confirm this is still present in the latest @ionic/angular version (5.0.7)

[brandyscarney]

Thanks for the issue! I was able to reproduce this. It seems to be because we export the value as RangeValue here: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/range/range-interface.ts#L6

It doesn't seem like we do this in any other case:

• Input
• Toggle
• Textarea

As a workaround, casting it to number works or setting the type for value to RangeValue:

import { RangeValue } from '@ionic/core';

@Component({
   ...
})
export class SomePage {
  value: RangeValue;

}

@liamdebeasi Do you see any issues with changing this?

[JumBay]

Any update on this?