How to add default values to ion-range with dual knobs

Ionic Framework ionic-v3
1

I can’t add default values to ion-range element:

<ion-range dualKnobs="true" min="4" max="18" step="1" snaps="true" pin="true" value="{lower: 4; upper: 18;}">
</ion-range>

Other ways I already tried:

value="{4; 18;}"
value="{4, 18}"
value="4; 18;"
value="4, 18"
value="4"

Sadly none of them work. The example in documentation also don’t show how it’s done.

ion-range documentation page

I made a simple and quick StackBlitz if you want to try it. The range element is in pages/home/home.html

2

It is possible using ngModel:

html

<ion-range dualKnobs="true" min="4" max="18" step="1" snaps="true" pin="true" [(ngModel)]="knobValues"></ion-range>

ts

private knobValues: Object = {
    upper:4,
    lower:18
  }

From KishuPro