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?

[liamdebeasi]

Thanks for the issue. This appears to be working as intended. RangeValue is number | { lower: number; upper: number }:

ionic-framework/core/src/components/range/range-interface.ts

Line 3 in 15f0c06

export type RangeValue = number | { lower: number; upper: number };

However, your value in your Angular app is likely only of type number. In this case the { lower: number; upper: number } in RangeValue is not assignable to type number.

---

You have a couple options:

1. You can set value to have type RangeValue. However, this means you will have to account for dual knob values which may or may not be present in your app.
2. You can cast event.value to number. In this particular context, casting to number is safe as your ion-range will never have dual knobs. If your range can have dual knobs then you will want to avoid this and go with option 1.

I am going to close this as this is not a bug in Ionic. Thanks!

[ionitron-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.