Ion-range not working


#1

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?


#3

Same issue here :confused:


#4

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"};

#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.


#6

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


Ion-range default value
#7

Still no luck so weird.


#8

can you post the contents of your html and .ts so i can have a look


#9

I sorted it out, it was because the range was in a form group.


#10

Can you explain how you sorted it out? I have the exact same issue here.


#11

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;


#12

updated my reply let me know if that helped


#13

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 …


#15

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">

12

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:
27

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