Ionic 3 - Custom component constructor ISSUE

Ionic Framework ionic-v3
1

Hello, I created a blank Ionic application and under: src/components
I copy / pasted the built-in Ionic component: range:

https://github.com/ionic-team/ionic/blob/master/src/components/range/

I used: custom-range for the selector and CustomRange for the class. Also, renamed the files corresponding to my custom component.

This is the resulting file structure of the src directory.

enter image description here

Everything works fine. I can use the following code succesfully:

<custom-range min="-30" max="30" step="5" snaps="true" [(ngModel)]="value"></custom-range>

My problem is that inside the constructor of: custom-range I have the following:

constructor(
	form: Form,
	private _haptic: Haptic,
	@Optional() item: Item,
	config: Config,
	private _plt: Platform,
	elementRef: ElementRef,
	renderer: Renderer,
	private _dom: DomController,
	private _cd: ChangeDetectorRef
) {
	super(config, elementRef, renderer, 'range', 0, form, item, null);
	this._events = new UIEventManager(_plt);
}

https://github.com/ionic-team/ionic/blob/master/src/components/range/range.ts#L264

Notice the usage of: range inside the call to the super constructor.

If I change that to: custom-range then my custom component doesn’t get rendered properly.

So, now I don’t know if this is tied to the built-in Ionic range component or what.

I know for sure I’m using my custom component when doing:

<custom-range min="-30" max="30" step="5" snaps="true" [(ngModel)]="value"></custom-range>

because if I modify the template of my custom component I can see that modification rendered, so that’s not a problem.

I’m just trying to change range to custom-range on the constructor above but no success.

Any idea on how to achieve this?

Thanks!