I everyone!
I’m trying to use the ion-range component. I’ve copy-pasted the example code of the page:
<ion-item>
<ion-range [(ngModel)]="happy">
<ion-icon range-left small name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
export class SuggestionsPage {
happy: number = 3;
}
This code has logged me an error because of the ngModel
Then I’ve removed the ngModel statement and the range bar is not displaying yet.
Anybody has found the same behaviour?
i take it you are trying to set the min and max value of the range slider. in that case
try this:
<ion-item>
<ion-range [(ngModel)]="happy" min=myRange.lower max=myRange.upper>
<ion-icon range-left small name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
and in your .ts
this.myRange= {"lower": "0", "upper": "20"};
Ennisdk
September 6, 2016, 11:59am
5
Actually my issue isn’t max and min it’s [(ngModel)]=“happy” the value i set in my .ts file isn’t shown in the range slider, it always shows 0.
i think i get it.
You want to set the initial value of the slider?
in that case:
html:
<ion-item>
<ion-range [(ngModel)]="happy" min=myRange.lower max=myRange.upper>
<ion-icon range-left small name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
set the max and min:
this.myRange= {"lower": "0", "upper": "20"};
and set the initial value:
export class SuggestionsPage {
happy: any = {'lower':5};
}
if you have a dual slider and want to set the second range too
happy: any = {'lower':5, 'upper':20};
if you don’t set max and min values these will be 0 and 100 respectively
can you post the contents of your html and .ts so i can have a look
Ennisdk
September 7, 2016, 8:39am
9
I sorted it out, it was because the range was in a form group.
Can you explain how you sorted it out? I have the exact same issue here.
how i use it
< ion-range pin=“true” [(ngModel)]=“ringTimeOut” max=“30” min=“10” name=“ringTimeOut” formControlName=“ringTimeOut” />
and in my controller
this.ringTimeOut = 30;
Ennisdk
January 10, 2017, 3:05pm
12
updated my reply let me know if that helped
I did this, but still didn’t work. I use another component which contains ion-range and that component is part of a form group. So it is a bit more complex …
I am not quite sure, but it seems I am having the same issue .
This is my code in the view:
<ion-range min="0" max="5" step="1" snaps="true" [(ngModel)]="profile.rate" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>5</ion-label>
</ion-range>
<p class="rating" padding>Rate is = {{(profileData | async)?.rate}}</p>
I can make ngModel to bind the data with the object in the database and return it in <p class="rating">
BUT: When I return to that page, the slider does not show the data. It is always Zero.
This is how I want it to look like:
Can anyone help / explain? I assume I am having a fundamental misunderstanding of some of the concepts…
Thank you for your efforts!
My environment info:
cli packages:
@ionic/cli-utils : 1.13.1
ionic (Ionic CLI) : 3.13.2
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.7.1
System:
Node : v8.6.0
npm : 5.2.0
OS : macOS High Sierra
Xcode : Xcode 9.0.1 Build version 9A1004
Misc:
backend : legacy