CODEWITHSUNDEEP
angularionic4
Yann92
Yann92

Reputation: 383

set the value of ion-range but does not work

I have a ion-range from 0 to 10 and I set the default value to 5 : question.min = 0 and question.max = 10 question.value = "5". The step is 1 (question.step = 1). 

<ion-item id="{{question.id}}" *ngSwitchCase=types.ratingScalePerso>
  <ion-range value="{{question.value}}" min="{{question.min}}" max="{{question.max}}" step="{{question.step}}"  color="secondary" pin="true" [(ngModel)]="question.answer">
    <ion-label slot="start">{{question.precisionMin}}</ion-label>
    <ion-label slot="end">{{question.precisionMax}}</ion-label>
  </ion-range>
</ion-item>

But the range selector stays at 0. Is it because I save the result in ngModel ? If yes, how can I do ? thank you

Upvotes: 1

Views: 3352

Answers (3)

Monomachus
Monomachus

Reputation: 1478

You need to understand how Angular works, so

[(ngModel)]="question.answer"

actually ngModel sets the value of a particular component (including range). If you want to do it using value instead you can delete the ngModel part and set [value]="precision.value".

https://ionic-v4-19uyfz.stackblitz.io/action-sheet

Upvotes: 1

Shailesh Bhokare
Shailesh Bhokare

Reputation: 592

Use below code

In .html file:

<ion-item id="{{question.id}}">
  <ion-range [(ngModel)]='question.value' min="{{question.min}}" max="{{question.max}}" step="{{question.step}}"  color="secondary" pin="true" [(ngModel)]="question.answer">
    <ion-label slot="start">{{question.precisionMin}}</ion-label>
    <ion-label slot="end">{{question.precisionMax}}</ion-label>
  </ion-range>
</ion-item>

Sample data array in .ts

question: any = {
    id:1,
    value:5,
    min: 0,
    max:10,
    step:1,
    answer:'answer',
    precisionMin:0,
    precisionMax:0
  }

Upvotes: 1

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

According to the Ionic 4 Docs, the value property needs to be a number. Your question.value = "5" is a string.

https://ionicframework.com/docs/api/range

Upvotes: 1

Related Questions